實現將多個影像放置在圓圈中的所需效果需要CSS和JavaScript。
要將圖像定位在一個圓圈中，CSS變換是必要的。每個影像應放置在包含元素的中心，然後沿 X 軸平移容器寬度的一半。以下程式碼示範了所需的 CSS：
.container {
width: 24em;
height: 24em;
position: relative;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}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中文網其他相關文章！
