Teach you to play CSS3 3D effect

CSS3 's 3d Start

To play CSS3 3d, you have to understand a few words, that is, perspective ( perspective ), rotation (), rotate and Movement ( translate ). 透视This is a realistic view of the 2D things on the screen, so as to show the effect of 3D. 旋转is no longer a rotation on the 2D plane, but a three-dimensional coordinate system rotation, including x-axis, y-axis, and z-axis rotation. 平移similarly.

Of course, it's a theory that you don't understand. Here are 3 gifs:

• Rotate along the x axis
  

• Rotate along the y axis
  

• Rotate along the z axis
  

Rotation should be no problem, it is easier to understand the translation, that is, in the x-axis, y-axis, z-axis movement.

You might say that perspective is not easy to understand, let me introduce some of the properties of perspective.

Perspective

perspectiveThe English name is the perspective, there is no way to form a 3D effect, but this thing is how to make our browser to form a 3D effect, you can see the following picture, in fact, learned the painting should know the perspective relationship, and here is the truth.

But in CSS it has values, such as perspective: 1000px what does this represent? We can understand that, if we directly to the eyes of the object to see, the object is very large to occupy our sight, we distance from it more and more, it is becoming smaller, three-dimensional sense is out is not, in fact, this value constructs a distance from the screen of our eyes, also constructs a virtual 3D illusion.

Perspective-origin

From the above we understand perspective , and add this origin is what, we said before this is the distance of the eye from the object, and this is the eye, the different positions of our viewpoints determine the different sights we see, the default is the center, the perspectice-origin: 50% 50% first value is the 3D element based on the X Axis, the second defines the position on the y-axis

When you define a Perspective-origin property for an element, its child elements get a perspective instead of the element itself. Must be used in conjunction with the perspective property, and only affect 3D conversion elements. (W3school)

Transform-style

perspective again, yes, it is the key to 3D CSS, the transform-style default is flat , if you want to be in the element of the line of sight 3D effect, it must be used transform-style: preserve-3d , otherwise it is just a plane transformation, not 3D transformation

Take your hands and turn css3-3d

Above we know a little bit about the concept, let's start the actual combat it!

We look at an effect, is not very cool ~

If the picture does not load, directly visit https://bupt-hjm.github.io/css3-3d/, think you can remember to give star the HH

First step: HTML structure

It's a simple container wrapped in a 6-a-pack. piecepiece-box

<p class= "Container" >    <p class= "Piece-box" >        <p class= "Piece piece-1" ></p>        < P class= "Piece piece-2" ></p>        <p class= "Piece piece-3" ></p>        <p class= "Piece piece-4" ></p>        <p class= "Piece piece-5" ></p>        <p class= "Piece piece-6" ></p>    </p></p>

Step Two: Add the necessary 3D properties into the 3D world

Through the above explanation, should be perspective familiar with it,

/* Container */.container {    -webkit-perspective:1000px;    -moz-perspective:1000px;    -ms-perspective:1000px;    perspective:1000px;} /*piece box */. Piece-box {        perspective-origin:50% 50%;        -webkit-transform-style:preserve-3d;        -moz-transform-style:preserve-3d;        -ms-transform-style:preserve-3d;        Transform-style:preserve-3d;}

Step three: Add the necessary styles

/* Container */.container {    -webkit-perspective:1000px;    -moz-perspective:1000px;    -ms-perspective:1000px;    perspective:1000px;} /*piece box */.piece-box {    position:relative;    width:200px;    height:200px;    margin:300px Auto;    perspective-origin:50% 50%;    -webkit-transform-style:preserve-3d;    -moz-transform-style:preserve-3d;    -ms-transform-style:preserve-3d;    Transform-style:preserve-3d;} /*piece Universal style */.piece {    position:absolute;    width:200px;    height:200px;    background:red;    opacity:0.5;}. piece-1 {    background: #FF6666;}. piece-2 {    background: #FFFF00;}. piece-3 {    background: #006699;}. piece-4 {    background: #009999;}. piece-5 {    background: #FF0033;}. piece-6 {    background: #FF6600;}

Of course, after you've done this, you'll only see a square, which is ours piece-6 , because our 3D hasn't transform started yet.

Fourth step: 3D transform to attack

The first is to implement the merry, we first do not let it go, first realize the light part.

How to achieve it? Because to make a circle, the circle is 360 degrees, and we have 6 piece, then it is easy to think that we need to put each piece in increments of 60 degrees to rotateY become the following

How do you pull them away from the center?

Here we also have to note that after we make the elements around the y axis, in fact, the X and Z axis will also follow the rotation, so the square of each plane of the vertical line or Z axis, we just need to change translateZ the value, and when it is translateZ positive, it is going in our direction, so we can pull out

But how is the distance measured?

is not at a glance ~

Now let's change the CSS.

. piece-1 {background: #FF6666;    -webkit-transform:rotatey (0deg) Translatez (173.2px);    -ms-transform:rotatey (0deg) Translatez (173.2px);    -o-transform:rotatey (0deg) Translatez (173.2px); Transform:rotatey (0deg) Translatez (173.2px);}.    piece-2 {background: #FFFF00;    -webkit-transform:rotatey (60deg) Translatez (173.2px);    -ms-transform:rotatey (60deg) Translatez (173.2px);    -o-transform:rotatey (60deg) Translatez (173.2px); Transform:rotatey (60deg) Translatez (173.2px);}.    piece-3 {background: #006699;    -webkit-transform:rotatey (120deg) Translatez (173.2px);    -ms-transform:rotatey (120deg) Translatez (173.2px);    -o-transform:rotatey (120deg) Translatez (173.2px); Transform:rotatey (120deg) Translatez (173.2px);}.    piece-4 {background: #009999;    -webkit-transform:rotatey (180deg) Translatez (173.2px);    -ms-transform:rotatey (180deg) Translatez (173.2px);    -o-transform:rotatey (180deg) Translatez (173.2px); Transform:rotatey (180deg) Translatez (173.2px);}.    piece-5 {background: #FF0033;    -webkit-transform:rotatey (240deg) Translatez (173.2px);    -ms-transform:rotatey (240deg) Translatez (173.2px);    -o-transform:rotatey (240deg) Translatez (173.2px); Transform:rotatey (240deg) Translatez (173.2px);}.    piece-6 {background: #FF6600;    -webkit-transform:rotatey (300deg) Translatez (173.2px);    -ms-transform:rotatey (300deg) Translatez (173.2px);    -o-transform:rotatey (300deg) Translatez (173.2px); Transform:rotatey (300deg) Translatez (173.2px);}

Has the merry been realized?

Fifth step: Animation let 3D move Up

To achieve merry, in fact, it is very simple, we just piece-box add the rotation animation on the line, 5s complete animation, from 0 degrees to 360 degrees

/*piece box */.piece-box {position:relative;    width:200px;    height:200px;    margin:300px Auto;    perspective-origin:50% 50%;    -webkit-transform-style:preserve-3d;    -moz-transform-style:preserve-3d;    -ms-transform-style:preserve-3d;    transform-style:preserve-3d;    Animation:piecerotate 5s; -moz-animation:piecerotate 5s; /* Firefox */-webkit-animation:piecerotate 5s; /* Safari and Chrome */-o-animation:piecerotate 5s;        /* Opera */}/* Merry Animation */@keyframes piecerotate{0% {-webkit-transform:rotatey (0deg);        -ms-transform:rotatey (0DEG);        -o-transform:rotatey (0DEG); Transform:rotatey (0deg);}        100% {-webkit-transform:rotatey (360deg);        -ms-transform:rotatey (360DEG);        -o-transform:rotatey (360DEG); Transform:rotatey (360DEG);}}        /* Firefox */@-moz-keyframes piecerotate{0% {-webkit-transform:rotatey (0deg);        -ms-transform:rotatey (0DEG);        -o-transform:rotatey (0DEG); Transform:rotatey (0deg);} 100% {-Webkit-transform:rotatey (360DEG);        -ms-transform:rotatey (360DEG);        -o-transform:rotatey (360DEG); Transform:rotatey (360DEG);}}        /* Safari and Chrome */@-webkit-keyframes piecerotate{0% {-webkit-transform:rotatey (0deg);        -ms-transform:rotatey (0DEG);        -o-transform:rotatey (0DEG); Transform:rotatey (0deg);}        100% {-webkit-transform:rotatey (360deg);        -ms-transform:rotatey (360DEG);        -o-transform:rotatey (360DEG); Transform:rotatey (360DEG);}}        /* Opera */@-o-keyframes piecerotate{0% {-webkit-transform:rotatey (0deg);        -ms-transform:rotatey (0DEG);        -o-transform:rotatey (0DEG); Transform:rotatey (0deg);}        100% {-webkit-transform:rotatey (360deg);        -ms-transform:rotatey (360DEG);        -o-transform:rotatey (360DEG); Transform:rotatey (360DEG);}}

There's no GIF in here. ~hhh is not the result of the cool effect, is not over oh ~ more Cool cube assembly

Cube, in fact, it is not difficult to achieve, I am not very detailed here, you can first imagine a face, and then to expand the other side how to achieve, such as we put the front of the cube translateZ(100px） close to our 100px, and then translateZ(-100px） let it away from us 100px, the left is the first translateX(-100px rotateY(90deg), on the right is translateX(100px) again rotateY(90deg) , above is first, translateY(-100px) rotateX(90deg) , below is first, translateY(100px) rotateX(90deg) as long as we write into the animation, everything is done.

CSS is as follows, the following is only put piece1 , other readers can make their own analogy, or see my GitHub source code

. piece-1 {background: #FF6666;     -webkit-transform:rotatey (0deg) Translatez (173.2px);     -ms-transform:rotatey (0deg) Translatez (173.2px);     -o-transform:rotatey (0deg) Translatez (173.2px);     Transform:rotatey (0deg) Translatez (173.2px);     Animation:piece1rotate 5s 5s; -moz-animation:piece1rotate 5s 5s; /* Firefox */-webkit-animation:piece1rotate 5s 5s; /* Safari and Chrome */-o-animation:piece1rotate 5s 5s; /* Opera */-webkit-animation-fill-mode:forwards; /* Chrome, Safari, Opera */animation-fill-mode:forwards;     }/*front*/@keyframes piece1rotate {0% {-webkit-transform:rotatey (0deg) Translatez (173.2px);     -ms-transform:rotatey (0deg) Translatez (173.2px);     -o-transform:rotatey (0deg) Translatez (173.2px); Transform:rotatey (0deg) Translatez (173.2px);}     100% {-webkit-transform:rotatey (0deg) Translatez (100px);     -ms-transform:rotatey (0deg) Translatez (100px);     -o-transform:rotatey (0deg) Translatez (100px); Transform:rOtatey (0deg) Translatez (100px);}     }/* Firefox */@-moz-keyframes piece1rotate {0% {-webkit-transform:rotatey (0deg) Translatez (173.2px);     -ms-transform:rotatey (0deg) Translatez (173.2px);     -o-transform:rotatey (0deg) Translatez (173.2px); Transform:rotatey (0deg) Translatez (173.2px);}     100% {-webkit-transform:rotatey (0deg) Translatez (100px);     -ms-transform:rotatey (0deg) Translatez (100px);     -o-transform:rotatey (0deg) Translatez (100px); Transform:rotatey (0deg) Translatez (100px);}     }/* Safari and Chrome */@-webkit-keyframes piece1rotate {0% {-webkit-transform:rotatey (0deg) Translatez (173.2px);     -ms-transform:rotatey (0deg) Translatez (173.2px);     -o-transform:rotatey (0deg) Translatez (173.2px); Transform:rotatey (0deg) Translatez (173.2px);}     100% {-webkit-transform:rotatey (0deg) Translatez (100px);     -ms-transform:rotatey (0deg) Translatez (100px);     -o-transform:rotatey (0deg) Translatez (100px); Transform:rotatey (0deg) Translatez (100px);}     }/* Opera */@-o-keyframes piece1rotate {0% {-webkit-transform:rotatey (0deg) Translatez (173.2px);     -ms-transform:rotatey (0deg) Translatez (173.2px);     -o-transform:rotatey (0deg) Translatez (173.2px); Transform:rotatey (0deg) Translatez (173.2px);}     100% {-webkit-transform:rotatey (0deg) Translatez (100px);     -ms-transform:rotatey (0deg) Translatez (100px);     -o-transform:rotatey (0deg) Translatez (100px); Transform:rotatey (0deg) Translatez (100px);} }

Careful readers can find that I used a animation-fill-mode: forwards; , this is actually let these keep the animation final effect, that is, the effect of the cube, the piece reader can not try to see, it will be back to the original.

Finally is the cube rotation, the front of our container has been used animation , the reader may want me to add a class put animaiton not on the line, HHH, animaiton will cover the front, the front of the Merry animation is gone, so in the HTML structure, I added a box Parcel piece , as follows

<p class= "Container" >    <p class= "Piece-box" >        <p class= "Piece-box2" ><!--newly added containers--            <p class= "Piece piece-1" ></p>            <p class= "Piece piece-2" ></p>            <p class= " Piece piece-3 "></p>            <p class=" Piece piece-4 "></p>            <p class=" Piece piece-5 "> </p>            <p class= "Piece piece-6" ></p>        </p>    </p></p>

In the animation we can control the delay time of the cube animation, is to wait until the cube assembly is complete before starting the animation

animation:boxrotate 5s 10s infinite; The first 5s is the length of the animation, the second 10s is the delay time, then we let the cube rotation, around the x axis from 0 degrees to 360 degrees, around the Y axis also 0 to the Y axis 360 degrees.

. piece-box2 {-webkit-transform-style:preserve-3d;    -moz-transform-style:preserve-3d;    -ms-transform-style:preserve-3d;    transform-style:preserve-3d;    Animation:boxrotate 5s 10s Infinite; -moz-animation:boxrotate 5s 10s Infinite; /* Firefox */-webkit-animation:boxrotate 5s 10s infinite; /* Safari and Chrome */-o-animation:boxrotate 5s 10s infinite;    /* Opera */}/* Cube Rotation animation */@keyframes boxrotate{0% {-webkit-transform:rotatex (0deg) Rotatey (0deg););    -ms-transform:rotatex (0deg) Rotatey (0deg););    -o-transform:rotatex (0deg) Rotatey (0deg);); Transform:rotatex (0deg) Rotatey (0deg););}    100% {-webkit-transform:rotatex (360deg) Rotatey (360deg);    -ms-transform:rotatex (360deg) Rotatey (360deg);    -o-transform:rotatex (360deg) Rotatey (360deg); Transform:rotatex (360deg) Rotatey (360deg);}}    /* Firefox */@-moz-keyframes boxrotate{0% {-webkit-transform:rotatex (0deg) Rotatey (0deg););    -ms-transform:rotatex (0deg) Rotatey (0deg);); -o-transform:rotatex (0DEG) Rotatey (0deg);); Transform:rotatex (0deg) Rotatey (0deg););}    100% {-webkit-transform:rotatex (360deg) Rotatey (360deg);    -ms-transform:rotatex (360deg) Rotatey (360deg);    -o-transform:rotatex (360deg) Rotatey (360deg); Transform:rotatex (360deg) Rotatey (360deg);}}    /* Safari and Chrome */@-webkit-keyframes boxrotate{0% {-webkit-transform:rotatex (0deg) Rotatey (0deg););    -ms-transform:rotatex (0deg) Rotatey (0deg););    -o-transform:rotatex (0deg) Rotatey (0deg);); Transform:rotatex (0deg) Rotatey (0deg););}    100% {-webkit-transform:rotatex (360deg) Rotatey (360deg);    -ms-transform:rotatex (360deg) Rotatey (360deg);    -o-transform:rotatex (360deg) Rotatey (360deg); Transform:rotatex (360deg) Rotatey (360deg);}}    /* Opera */@-o-keyframes boxrotate{0% {-webkit-transform:rotatex (0deg) Rotatey (0deg););    -ms-transform:rotatex (0deg) Rotatey (0deg););    -o-transform:rotatex (0deg) Rotatey (0deg);); Transform:rotatex (0deg) Rotatey (0deg););} 100% {-webkit-transform:rotatex (360DEG) Rotatey (360deg);    -ms-transform:rotatex (360deg) Rotatey (360deg);    -o-transform:rotatex (360deg) Rotatey (360deg); Transform:rotatex (360deg) Rotatey (360deg);}}

Final effect, done!