Maison >interface Web >js tutoriel >Illusion de rotation du carrousel d'images en utilisant HTML CSS et Javascript

Illusion de rotation du carrousel d'images en utilisant HTML CSS et Javascript

Mary-Kate Olsenoriginal: 2024-11-07 14:05:03447parcourir

Image carousel rotation illusion using html css and javascript

code

<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrousel d'images rotatif</title>
<style>
    corps {
        affichage : flexible ;
        justifier-contenu : centre ;
        aligner les éléments : centre ;
        hauteur : 100vh ;
        marge : 0 ;
        couleur d'arrière-plan : #0d0d0d ;
        débordement : caché ;
        transition : facilité de l'image d'arrière-plan en 0,5 s ;
        taille de l'arrière-plan : couverture ;
        position d'arrière-plan : centre ;

    }

    /* Conteneur carrousel */
    .carrousel {
        position : relative ;
        largeur : 130px ;
        hauteur : 130px ;
        style de transformation : préserver-3d ;
        perspective : 1000px ;
        transition : transformation 1 s ;
    }

    /* Styles d'images */
    .carrousel img {
        position : absolue ;
        hauteur : 100 % ;
        largeur : 100 % ;
        /* largeur : 150px;
        hauteur : 150px ; */
        rayon de bordure : 10 px ;
        box-shadow : 0 0 10px rgba (255, 110, 199, 0,3);
        transformation-origine : centre ;
        transition : transformation 0,5 s, filtre 0,5 s ;
        opacité : 0,8 ;
    }

    /* Positionne chaque image autour de l'axe 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); }

    /* Icônes de contrôle */
    .contrôles {
        position : absolue ;
        en bas : 20 px ;
        gauche : 20px ;
        affichage : flexible ;
        écart : 10 px ;
    }
    Bouton .controls {
        largeur : 40 px ;
        hauteur : 40px ;
        taille de police : 18 px ;
        bordure : aucune ;
        couleur d'arrière-plan : #181616 ;
        couleur : #fff ;
        curseur : pointeur ;
        rayon de bordure : 50 % ;
        transition : couleur d'arrière-plan 0,3 s ;
    }
    Bouton .controls : survolez {
        couleur d'arrière-plan : #555 ;
    }
</style>
&Lt;/tête>
<corps>

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment activer/désactiver la visibilité des éléments dans React à l'aide de la gestion des états ?Article suivant：Comment activer/désactiver la visibilité des éléments dans React à l'aide de la gestion des états ?

Articles Liés

Voir plus