suchen

Heim >Web-Frontend >js-Tutorial >Bildkarussell-Rotationsillusion mit HTML-CSS und Javascript

Bildkarussell-Rotationsillusion mit HTML-CSS und Javascript

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-07 14:05:03458Durchsuche

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>

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!

JavaScript css html Filter using pointer display position overflow margin border viewport background transform transition flex
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie schalte ich die Elementsichtbarkeit in React mithilfe der Statusverwaltung um?Nächster Artikel：Wie schalte ich die Elementsichtbarkeit in React mithilfe der Statusverwaltung um?

In Verbindung stehende Artikel

Mehr sehen