Pure CSS to achieve left-right flipping effect of images (code attached)-CSS Tutorial-php.cn

Pure CSS to achieve left-right flipping effect of images (code attached)

青灯夜游

Release： 2021-02-25 10:20:53

forward

4793 people have browsed it

Pure CSS to achieve left-right flipping effect of images (code attached)

[Recommended tutorial: CSS video tutorial]

CSS The main technology used to flip images is not only 3D flipping and positioning, but also a Attribute backface-visibility: visible|hidden;This attribute is mainly used to set whether the back face of the element is visible.

The rendering is as follows:

Pure CSS to achieve left-right flipping effect of images (code attached)

The specific steps are as follows:

1. Write the main body of the page,

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

Copy after login

2. Superimpose the two pictures together through positioning

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

Copy after login

3. Set the back side of the first picture to be invisible

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

Copy after login

4. Add a rotation of 180 degrees

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

Copy after login

Complete code :

<!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>

Copy after login

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Pure CSS to achieve left-right flipping effect of images (code attached). For more information, please follow other related articles on the PHP Chinese website!