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 중국어 웹사이트의 기타 관련 기사를 참조하세요!