Maison > interface Web > tutoriel CSS > le corps du texte

Comment obtenir un effet de retournement d'image en CSS3 ? (exemple de code)

青灯夜游
Libérer: 2018-10-12 17:56:21
avant
2540 Les gens l'ont consulté

Cet article vous présentera comment obtenir l'effet de retournement d'image en CSS3 (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les rendus spécifiques sont les suivants :

En plus du retournement et du positionnement 3D, la principale technologie utilisée utilise également un nouvel attribut backface-visibility : visible|hidden;

Cet attribut est principalement utilisé pour définir si l'arrière de l'élément est visible.

Les étapes spécifiques sont les suivantes :

1 Écrivez le corps principal de la page,

 <p>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </p>
Copier après la connexion

2 Superposez les deux images ensemble par positionnement

.
  p img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
Copier après la connexion

3. Définissez le verso de la première image pour qu'il soit invisible

 p img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
Copier après la connexion

4. Ajoutez une rotation de 180 degrés

 p:hover img {
            transform: rotateY(180deg);
        }
Copier après la connexion

Enfin, donnez le code complet

. 🎜>




    
    
    
    Document
    



    <p>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </p>


Copier après la connexion

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo sur les bases CSS , Tutoriel vidéo CSS3  !

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal