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

원형에 아이콘 배치

질문:
클릭 가능한 상태를 유지하면서 여러 이미지를 원 안에 정렬하려면 어떻게 해야 합니까? 기능?

답변:

2024 솔루션:

이 솔루션은 보다 현대적인 접근 방식을 제공합니다.

1. 이미지 배열 활용 개체.
2. 템플릿 언어(예: Pug)를 사용하여 배열을 기반으로 HTML을 생성합니다.
3. CSS에서 이미지 수와 가장자리 크기를 기반으로 계산된 반경으로 컨테이너를 정의합니다.
4. 변환을 사용하여 원에 이미지를 배치하고 간격을 둡니다. 동일하게.

원래 솔루션:

1. 지름이 정의된 래퍼를 만들고 중심을 기준으로 배치합니다.

2. 래퍼 내에서 각 이미지의 위치를 ​​지정합니다.

   • 절대 위치로 설정하고 수평 및 수직 중앙에 배치합니다.
   • 이미지 크기를 조정하려면 음수 여백을 사용합니다.

3. 원하는 회전 각도로 클래스를 정의하고 변환을 적용합니다. 체인:

   • 회전은 객체와 그 객체를 변형합니다.
   • translate는 회전된 X축을 따라 객체를 이동합니다.
   • rotate 다시 회전은 객체를 원래 위치로 다시 회전합니다.

HTML 및 CSS 코드 발췌문:

<div class="circle-container">
    <a href="#" class="center"></a>
    <a href="#" class="deg0"></a>
    <a href="#" class="deg45"></a>
    <a href="#" class="deg135"></a>
    <a href="#" class="deg180"></a>
    <a href="#" class="deg225"></a>
    <a href="#" class="deg315"></a>
</div>

.circle-container {
    width: 24em;
    height: 24em;
    position: relative;
}
.circle-container a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
}
.deg0 { transform: translate(12em); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }

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