Rumah >hujung hadapan web >tutorial css >Bagaimana Menyusun Imej Boleh Diklik dalam Pembentukan Pekeliling?

Bagaimana Menyusun Imej Boleh Diklik dalam Pembentukan Pekeliling?

Susan Sarandon
Susan Sarandonasal
2024-12-11 05:54:09475semak imbas

How to Arrange Clickable Images in a Circular Formation?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn