Maison  >  Article  >  interface Web  >  Comment utiliser CSS pour obtenir l'effet de retournement d'images (code ci-joint)

Comment utiliser CSS pour obtenir l'effet de retournement d'images (code ci-joint)

不言
不言original
2018-09-25 17:57:124424parcourir

Le contenu de cet article explique comment utiliser CSS pour obtenir l'effet de retournement d'images (avec du 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,

 dc6dce4a544fdca2df29d5ac0ea9906b
        77159b047218d7f27ceda3873a1c2fc8
        c9436b31b245ae8ecaa1f2512760254b
    16b28748ea4df4d9c2150843fecfba68

2. Utilisez le positionnement Superposez deux images ensemble

div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }

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

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }

4. Ajouter une rotation de 180 degrés

div:hover img {
            transform: rotateY(180deg);
        }

Enfin le code complet est donné

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* backface-visibility */
        
        div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>

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

</html>

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!

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