Bildkarussell-Rotationsillusion mit HTML-CSS und Javascript-js-Tutorial-php.cn

Bildkarussell-Rotationsillusion mit HTML-CSS und Javascript

Mary-Kate Olsen

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

Original

447 Leute haben es durchsucht

Image carousel rotation illusion using html css and javascript

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotierendes Bildkarussell</title>
<Stil>
    Körper {
        Anzeige: Flex;
        rechtfertigen-Inhalt: Mitte;
        align-items: center;
        Höhe: 100 Vh;
        Rand: 0;
        Hintergrundfarbe: #0d0d0d;
        Überlauf: versteckt;
        Übergang: Hintergrundbild 0,5 s Leichtigkeit;
        Hintergrundgröße: Cover;
        Hintergrundposition: Mitte;

    }

    /* Karussellbehälter */
    .karussell {
        Position: relativ;
        Breite: 130px;
        Höhe: 130px;
        Transformationsstil: Preserve-3d;
        Perspektive: 1000px;
        Übergang: 1s transformieren;
    }

    /* Bildstile */
    .carousel img {
        Position: absolut;
        Höhe: 100 %;
        Breite: 100 %;
        /* Breite: 150px;
        Höhe: 150px; */
        Randradius: 10px;
        Box-Shadow: 0 0 10px rgba(255, 110, 199, 0,3);
        Transformationsursprung: Mitte;
        Übergang: Transformation 0,5 s, Filter 0,5 s;
        Deckkraft: 0,8;
    }

    /* Jedes Bild um die Y-Achse positionieren */
    .carousel img:nth-child(1) { transform: rotationY(0deg) translatorZ(150px); }
    .carousel img:nth-child(2) { transform: rotationY(72deg) translatorZ(150px); }
    .carousel img:nth-child(3) { transform: rotationY(144deg) translatorZ(150px); }
    .carousel img:nth-child(4) { transform: rotationY(216deg) translatorZ(150px); }
    .carousel img:nth-child(5) { transform: rotationY(288deg) translatorZ(150px); }

    /* Steuersymbole */
    .controls {
        Position: absolut;
        unten: 20px;
        links: 20px;
        Anzeige: Flex;
        Lücke: 10px;
    }
    .controls-Schaltfläche {
        Breite: 40px;
        Höhe: 40px;
        Schriftgröße: 18px;
        Grenze: keine;
        Hintergrundfarbe: #181616;
        Farbe: #fff;
        Cursor: Zeiger;
        Randradius: 50 %;
        Übergang: Hintergrundfarbe 0,3 s;
    }
    .controls button:hover {
        Hintergrundfarbe: #555;
    }
</style>
</head>
<Körper>

<div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBildkarussell-Rotationsillusion mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!