How to use css to achieve the effect of flipping images (code attached)-CSS Tutorial-php.cn

How to use css to achieve the effect of flipping images (code attached)

不言

Release： 2018-09-25 17:57:12

Original

4436 people have browsed it

The content of this article is about how to use css to achieve the effect of flipping images (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The specific renderings are as follows:

In addition to 3D flipping and positioning, the main technology used also uses a new attribute backface-visibility: visible|hidden;

This attribute is mainly used to set whether the back side of the element is visible.

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. Make the two pages Pictures are superimposed together

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 rotation of 180 degrees

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

Copy after login

Finally give the 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

The above is the detailed content of How to use css to achieve the effect of flipping images (code attached). For more information, please follow other related articles on the PHP Chinese website!