Bagaimana Menyusun Imej Boleh Diklik dalam Pembentukan Pekeliling?

Letakkan Ikon ke dalam Bulatan

Soalan:
Bagaimanakah saya boleh menjajarkan berbilang imej dalam bulatan sambil mengekalkan boleh dikliknya kefungsian?

Jawapan:

2024 Penyelesaian:

Penyelesaian ini menawarkan pendekatan yang lebih moden:

1. Gunakan tatasusunan objek imej.
2. Jana HTML berdasarkan tatasusunan menggunakan bahasa templat (cth., Pug).
3. Dalam CSS, tentukan bekas dengan jejari yang dikira berdasarkan bilangan imej dan saiz tepi.
4. Letakkan imej pada bulatan menggunakan transformasi , jarakkan sama rata.

Asal Penyelesaian:

1. Buat pembalut dengan diameter yang ditentukan dan letakkannya berbanding dengan tengah.

2. Letakkan setiap imej dalam pembalut:

   • Tetapkan kedudukan kepada mutlak dan tengahkannya secara mendatar dan menegak.
   • Gunakan jidar negatif untuk melaraskan saiz imej.

3. Tentukan kelas dengan sudut putaran yang diingini dan gunakan rantai transformasi:

   • putar mengubah objek dan paksinya.
   • terjemah menggerakkan objek di sepanjang paksi X yang diputar.
   • putar semula putar objek ke belakang ke kedudukan asalnya.

Coretan Kod HTML dan 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); }

Atas ialah kandungan terperinci Bagaimana Menyusun Imej Boleh Diklik dalam Pembentukan Pekeliling?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!