CSS3 for a cool 3D box flip effect

Brief introduction

Use CSS3 first in the plane space to form a cube box, and then let the whole box upside down, first:

Step 1: First put 6 pictures in CSS

Here is the 3D transform of the CSS3 to flip each face, making it a three-dimensional box, the code is as follows:

//left. Pic2 {    transform:rotatey (90deg);   //Flip 90 degrees along the y-axis    transform-origin: Right;    To the right of the axis }//front. pic6{    transform:Translatez (100%);   Vertical screen moves the length of the cube Outward }

Several other faces are flipped in the same way.

2. Animate the entire cube

When the three-dimensional box is finished, the three-dimensional box will flip to the effect of flipping as long as the entire box is animated:

//Custom Animation style @keyframes Mysec{0%{transform:Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);}//Add styles as you want, and split the number of animation frames 50%{Transform:Rotatex (230deg) Rotatey ( -20deg) Rotatez ( -90deg);}100%{Transform:Rotatex ( -360deg) Rotatey (360deg) Rotatez ( -360deg);}}//adds a style to the container. Mydiv{Animation:Mysec 7s Infinite;//Call animation Transform-style:preserve-3d;//Specify container nesting elements three-dimensional rendering effect perspective:1000px;//Specify the perspective effect of 3D elements}

You can also apply animations for a single face, as in the steps above, as long as the animation continues and the delay time can achieve cool effect!

Final effect

If there are shortcomings, welcome the small partners to correct!

CSS3 for a cool 3D box flip effect