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

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

不言

Libérer： 2018-09-25 17:57:12

original

4447 Les gens l'ont consulté

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,

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

Copier après la connexion

2. Utilisez le positionnement Superposez deux images ensemble

div 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

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

Copier après la connexion

4. Ajouter une rotation de 180 degrés

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

Copier après la connexion

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>

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!