如何使用 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中文網其他相關文章！