CSS と JavaScript を使用してアイコンを円形に配置するにはどうすればよいですか?

CSS と JavaScript を使用してアイコンを円に配置する

概要

複数の画像を円に配置するという望ましい効果を実現するには、CSS と JavaScript の両方が必要です。

配置用CSS

へ画像を円の中に配置するには、CSS 変換が必要です。各画像は、それを含む要素の中心に配置され、コンテナの幅の半分だけ X 軸に沿って移動されます。次のコードは、必要な CSS を示しています。

.container {
  width: 24em;
  height: 24em;
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

配布用の JavaScript

CSS が画像を配置する間、JavaScript を使用して画像を円の周りに均等に配布します。これには、各画像間の角度を計算し、それに応じて回転することが含まれます。次のコードはこれを示しています。

const container = document.querySelector('.container');
const icons = document.querySelectorAll('.icon');

const containerWidth = container.getBoundingClientRect().width;
const containerHeight = container.getBoundingClientRect().height;
const iconWidth = icons[0].getBoundingClientRect().width;
const iconHeight = icons[0].getBoundingClientRect().height;

icons.forEach((icon, index) => {
  const angle = (Math.PI * 2) / icons.length;
  const transformString = `rotate(${angle * index}rad) translate(${containerWidth / 2 - iconWidth / 2}px, ${containerHeight / 2 - iconHeight / 2}px)`;
  icon.style.transform = transformString;
});

結論

配置用の CSS と配布用の JavaScript を組み合わせることで、複数の画像を効果的に円の中に配置し、クリック可能な機能を維持できます。

以上がCSS と JavaScript を使用してアイコンを円形に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。