CSS를 사용하여 클릭 가능한 이미지를 원으로 배열할 수 있나요?

원형에 아이콘 배치

질문: 여러 개의 요소를 다른 요소 주위의 원 안에 배치하고 해당 요소를 클릭 가능한 링크로 만들까요?

답변:

예, CSS를 사용하면 가능합니다. 다음은 두 가지 솔루션입니다.

최신 솔루션(2024)

1. URL 및 대체 텍스트가 포함된 이미지 배열로 시작합니다.
2. Pug 또는 기타 솔루션을 사용하여 HTML을 생성합니다. 이미지와 링크를 생성하는 방법입니다.
3. 이미지 수와 이미지 수에 따라 컨테이너 크기를 설정합니다. size.
4. CSS 변환을 사용하여 원에 이미지 위치를 지정합니다.

레거시 솔루션(역사적 이유로 보존됨)

1. 위치가 포함된 래퍼 만들기: 상대적인; 직경을 설정합니다.
2. 위치: 절대;를 사용하여 래퍼 중앙에 이미지가 있는 링크를 배치합니다.
3. 각 이미지의 각도를 설정하고 연결된 CSS 변환을 적용합니다.

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

참고: 최신 솔루션은 유연하며 변경 없이 새 이미지를 추가할 수 있습니다. 현재 구조입니다.

위 내용은 CSS를 사용하여 클릭 가능한 이미지를 원으로 배열할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!