중앙 이미지 주위에 클릭 가능한 이미지를 원으로 배열하는 방법은 무엇입니까?

원형에 아이콘 배치

질문:

여러 이미지를 원 안에 어떻게 배치할 수 있나요? 다른 이미지 주위를 둘러싸서 모두 클릭할 수 있게 만듭니다. 링크?

답변:

솔루션 1(현대)

HTML, CSS 및 JavaScript 사용:

1. 다음을 기반으로 이미지 링크가 포함된 HTML을 생성합니다. 배열.
2. CSS를 사용하여 컨테이너 내의 원에 이미지를 배치합니다.
3. 원 반경과 이미지 크기를 기준으로 컨테이너 크기를 조정합니다.

해결책 2(기존)

CSS 사용 변환:

1. 원 컨테이너에 대한 래퍼 div를 만듭니다.
2. 이미지를 래퍼 중앙에 절대적으로 배치합니다.
3. 회전 및 이동하려면 연결된 CSS 변환을 적용합니다. 이미지를 원하는 각도로.

코드 발췌문:

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

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

.deg0 img {
  transform: rotate(0deg);
}

.deg45 img {
  transform: rotate(45deg);
}

.deg90 img {
  transform: rotate(90deg);
}

위 내용은 중앙 이미지 주위에 클릭 가능한 이미지를 원으로 배열하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!