Project Address:
Github.com/BUPT-HJM/cs…
The demo address:
Bupt – HJM. Making. IO/CSS 3 – flip – b…Welcome to star

Project details

The key in the project is a few properties, Perspective and Rotate

perspective

Property specifies the distance between the observer and the plane z=0 to give perspective to elements with three-dimensional position transformations. The 3d element z>0 is larger than normal, and z<0 is smaller than normal, depending on the value of this attribute < p=””>

body { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; background-color: #212121; Font-family: 'Microsoft yahei '; }Copy the code

preserve-3d

The transform-style property specifies whether the child elements of the element are (seemingly) located in three dimensions or are flattened in the plane in which the element is located.

.preserve-3d {
            -webkit-transform-style: preserve-3d;            
            -moz-transform-style: preserve-3d;            
            -ms-transform-style: preserve-3d;            
            transform-style: preserve-3d;
                    }
Copy the code

rotate

Rotate plays a very important role in this effect, especially rotateY, which is rotating along the Y axis, and what you see is that you use @keyFrame of the animation to rotate the rotateY, Also note the pairing with transform-Origin, which is particularly critical as it is the axis of rotation.

Welcome to Github, to star

Other is CSS layout with HTML, want to understand the details can go to Github to see the source code to learn, welcome to correct, remember to star oh ~

It can be reproduced and quoted freely, but the author must be signed and indicate the source of the article.