How to achieve 3D flip effect in css3

In CSS3, you can use the transform attribute with 3D rotation functions such as rotateY() and rotateX() to achieve a 3D flip effect. rotateX() can rotate an element by a given angle around its X axis, and rotateY() can rotate an element by a given angle around its Y axis.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Realize the flipping of a picture

1. HTML structure

<div class="stage">
    <div class="flipBox">
        <figure class="pic front">Front</figure>
        <figure class="pic back">Back</figure>
    </div>
</div>

The structure of the above HTML is:

• p.stage specifies a 3D stage, basically all implementations using CSS3 3D transformation will do this, specifying perspective styles to achieve perspective effects
• p.flipBox is the real implementation of translation The container on the front will be 3D transformed later
• figure represents two pictures, one is the front and one is the back

The idea is: combine figure.front and figure.back flips the front and back of the image. After the image is flipped, figure.back will become the side facing the user, and figure.front will face away from the user.

In the initial state, figure.back is flipped horizontally (i.e. transform: rotateY(180deg)), so that the text on the back will be displayed upright after the image is flipped (otherwise, the text on the back will be upside down after flipping it over) ——Because it was upright before the reversal~).

3. CSS structure

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}

Now analyze the CSS of each element:

body,figure {
    margin: 0;
    padding: 0;
}

Nothing to say, remove the inner and outer margins!

.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}

Define styles for the 3D stage. The margin is to have some distance from the left and top of the browser so that the transformation can be displayed more completely. Perspective specifies the distance between the 3D element and the camera (or human eye). The smaller the value, the closer the 3D element is to the human eye. The larger the value, the farther the 3D element is from the human eye.

.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

Define styles for flipping boxes. This element is the one that actually performs the 3D transformation. Its position attribute is to create anchor points for its two child figure elements so that the two child figure elements can be positioned at the upper left corner of p.flipBox to align the two pictures. The transform-style attribute is required, which specifies the form in which the descendant elements of the p.flipBox element are transformed in 3D (preserve-3d means that the descendant elements are still transformed in 3D mode; the other value flat means that only p .flipBox performs 3D transformation, and the descendant elements are only the content in the p.flipBox plane without 3D transformation), which is very similar to the pseudo 3D in After Effect. Transition stipulates that only the transform attribute will be transformed, and the time is 1s.

.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

Specifies a unified style for the two pictures (the two figures here). Use absolute positioning to position the upper left corner of p.flipBox, and the two figures are the same size, so they overlap perfectly. Backface-visibility is an important attribute. It specifies whether the 3D element facing away from the user is displayed. It should be set as hidden (hidden), otherwise the back side will be displayed when the back side should not be displayed. For example, in the initial state, figure.back obviously should not be displayed, but because figure.back is post-rendered, it will be overlaid on figure.front. We previously specified transform: rotateY(180deg) for figure.back, so figure. The front is facing away from the user and will not be displayed. For another example, after flipping, figure.front will be in front of figure.back, but at this time figure.front will face away from the user, so it is hidden by backface-visibility, which is exactly what we want.

.front {
    background: #f00;
}

It is stipulated that the front side of the picture should be red.

.back {
    background: #090;
    transform: rotateY(180deg);
}

specifies that the back of the picture is green. At the same time, transform: rotateY(180deg) specifies that in the initial state, figure.back is flipped horizontally by 180°.

3. Start rotating the picture

.stage:hover .flipBox {
 transform: rotateY(-180deg);
}

When the mouse moves into the 3D stage, rotate the p.flipBox by -180° to achieve the picture flipping effect. It is also possible to rotate p.flipBox 180° here, but the direction of rotation is different.

2. Case

1. Picture preparation

is To reduce HTTP requests, sprites are used here.

The size of the picture is 200*200, divided into upper and lower parts. The upper part is the front of the flipped picture (black and white), and the lower part is the back of the flipped picture (color). The logos above and below have been centered horizontally and vertically to ensure that the logos are in the same position before and after flipping.

2. Code implementation

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Study</title>
    <style>
        html,body,ul,li,a,figure,h4 {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        h4 {
            display: none;
        }
        .Stage {
            width: 604px;
            height: 203px;
            margin: 50px;
            border-left: 1px solid #f5f5f5;
            border-top: 1px solid #f5f5f5;
            perspective: 10000px;
        }
        .trigger {
            display: block;
            float: left;
            width: 200px;
            height:100px;
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            position: relative;
        }
        .flipBox {
            display: block;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1.2s;
            transition-delay: 0.03s;
        }
        .trigger:hover .flipBox {
            transform: perspective(10000px) rotateY(-180deg);    /*这里的perspective为每个flipBox规定单独的视点距离，解决Chrome中统一视点的问题*/
        }
        .plane {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back {
            transform: rotateY(180deg);
        }
        .logo1 figure.front {
            background: url("pic.png") center 0 no-repeat;
        }
        .logo2 figure.front {
            background: url("pic_2.png") center 0 no-repeat;
        }
        .logo3 figure.front {
            background: url("pic_3.png") center 0 no-repeat;
        }
        .logo4 figure.front {
            background: url("pic_4.png") center 0 no-repeat;
        }
        .logo5 figure.front {
            background: url("pic_5.png") center 0 no-repeat;
        }
        .logo6 figure.front {
            background: url("pic_6.png") center 0 no-repeat;
        }
        .logo1 figure.back {
            background: url("pic.png") center -100px no-repeat;
        }
        .logo2 figure.back {
            background: url("pic_2.png") center -100px no-repeat;
        }
        .logo3 figure.back {
            background: url("pic_3.png") center -100px no-repeat;
        }
        .logo4 figure.back {
            background: url("pic_4.png") center -100px no-repeat;
        }
        .logo5 figure.back {
            background: url("pic_5.png") center -100px no-repeat;
        }
        .logo6 figure.back {
            background: url("pic_6.png") center -100px no-repeat;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a class="flipBox logo1" href="#">
                <h4 id="Fun-nbsp-Games">Fun Games</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo2" href="#">
                <h4 id="Man-nbsp-Style">Man Style</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo3" href="#">
                <h4 id="Sims">Sims.</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo4" href="#">
                <h4 id="Googla">Googla</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo5" href="#">
                <h4 id="JavaScript">JavaScript</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo6" href="#">
                <h4 id="Felix">Felix</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

(Learning video sharing: css Video tutorial)

The above is the detailed content of How to achieve 3D flip effect in css3. For more information, please follow other related articles on the PHP Chinese website!