Illusion de rotation du carrousel d'images en utilisant HTML CSS et Javascript-js tutoriel-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-07 14:05:03

original

499 Les gens l'ont consulté

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>

Copier après la connexion

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!