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:124398parcourir

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

Article précédent：Comment utiliser CSS pour implémenter une barre d'image défilante (avec code)Article suivant：Comment utiliser CSS pour implémenter une barre d'image défilante (avec code)

Articles Liés

Voir plus