Home > Article > Web Front-end > How to use css to achieve the effect of flipping images (code attached)

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

不言Original: 2018-09-25 17:57:124401browse

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,

 dc6dce4a544fdca2df29d5ac0ea9906b
        77159b047218d7f27ceda3873a1c2fc8
        c9436b31b245ae8ecaa1f2512760254b
    16b28748ea4df4d9c2150843fecfba68

2. Make the two pages Pictures are superimposed together

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

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

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

4. Add rotation of 180 degrees

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use CSS to implement a scrolling picture bar (with code)Next article：How to use CSS to implement a scrolling picture bar (with code)

See more

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

Related articles