Rumah >hujung hadapan web >tutorial js >Ilusi putaran karusel imej menggunakan html css dan javascript

Ilusi putaran karusel imej menggunakan html css dan javascript

Mary-Kate Olsenasal: 2024-11-07 14:05:03448semak imbas

Image carousel rotation illusion using html css and javascript

kod

<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karusel Imej Berputar</title>
<gaya>
    badan {
        paparan: flex;
        justify-content: pusat;
        align-item: tengah;
        ketinggian: 100vh;
        margin: 0;
        warna latar belakang: #0d0d0d;
        limpahan: tersembunyi;
        peralihan: imej latar belakang 0.5s mudah;
        saiz latar belakang: penutup;
        latar belakang-kedudukan: tengah;

    }

    /* Bekas karusel */
    .carousel {
        kedudukan: relatif;
        lebar: 130px;
        ketinggian: 130px;
        transform-style: preserve-3d;
        perspektif: 1000px;
        peralihan: mengubah 1s;
    }

    /* Gaya Imej */
    .carousel img {
        jawatan: mutlak;
        ketinggian: 100%;
        lebar: 100%;
        /* lebar: 150px;
        ketinggian: 150px; */
        jejari sempadan: 10px;
        bayang-kotak: 0 0 10px rgba(255, 110, 199, 0.3);
        transform-asal: pusat;
        peralihan: mengubah 0.5s, penapis 0.5s;
        kelegapan: 0.8;
    }

    /* Letakkan setiap imej di sekeliling paksi-Y */
    .carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
    .carousel img:nth-child(2) { transform: rotateY(72deg) translateZ(150px); }
    .carousel img:nth-child(3) { transform: rotateY(144deg) translateZ(150px); }
    .carousel img:nth-child(4) { transform: rotateY(216deg) translateZ(150px); }
    .carousel img:nth-child(5) { transform: rotateY(288deg) translateZ(150px); }

    /* Ikon Kawalan */
    .controls {
        jawatan: mutlak;
        bawah: 20px;
        kiri: 20px;
        paparan: flex;
        jurang: 10px;
    }
    butang .controls {
        lebar: 40px;
        ketinggian: 40px;
        saiz fon: 18px;
        sempadan: tiada;
        warna latar belakang: #181616;
        warna: #fff;
        kursor: penunjuk;
        jejari sempadan: 50%;
        peralihan: warna latar belakang 0.3s;
    }
    butang .controls:hover {
        warna latar belakang: #555;
    }
</style>
</head>
<badan>

<div>

Atas ialah kandungan terperinci Ilusi putaran karusel imej menggunakan html css dan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Filter using pointer display position overflow margin border viewport background transform transition flex

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

Artikel sebelumnya：Bagaimana untuk Togol Keterlihatan Elemen dalam Reaksi Menggunakan Pengurusan Negeri?Artikel seterusnya：Bagaimana untuk Togol Keterlihatan Elemen dalam Reaksi Menggunakan Pengurusan Negeri?

Artikel berkaitan

Lihat lagi