Ilusi putaran karusel imej menggunakan html css dan javascript-tutorial js-php.cn

Ilusi putaran karusel imej menggunakan html css dan javascript

Mary-Kate Olsen

Lepaskan： 2024-11-07 14:05:03

asal

406 orang telah melayarinya

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>

Salin selepas log masuk

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!