Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to master CSS3 3D technology". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The 3D start of css3

To play css3 3D, you must understand several words, namely, perspective, rotate and translate. Penetration-vision is to look at 2D things on the screen from a realistic perspective, so as to show the effect of 3D. Rotation is no longer the rotation on the 2D plane, but the rotation of the three-dimensional coordinate system, including X axis, Y axis, Z axis rotation. Translation is the same.

Of course, using the theory to explain, I guess you still don't understand. Here are three gif:

Rotate along the X axis

Rotate along the Y axis

Rotate along the Z axis

There should be no problem with rotation, so it's easier to understand translation, which is moving on the X axis, Y axis and z axis.

You may say that it is difficult to understand. Let me introduce some of the attributes of transparent vision.

Perspective

Perspective English name is see-through, without this thing, there is no way to form a 3D effect, but how does this thing make our browser form a 3D effect? you can take a look at the following picture. In fact, those who have studied painting should know the through-view relationship, and this is the truth here.

But it has a numerical value in css. For example, what does perspective: 1000px stand for? We can understand it this way, if we look directly at the object, the object will occupy our line of sight, we are more and more away from it, it is getting smaller, and the three-dimensional sense will come out, right? in fact, this value constructs a distance between our eyes and the screen, which also creates a virtual 3D illusion.

Perspective-origin

From the above we understand perspective, and add what this origin is, what we said earlier is the distance of the eye from the object, and this is the line of sight of the eye, the different position of our point of view determines the different scene we see, the default is the center, perspectice-origin: 50% 50%, the first value is the X axis on which the 3D element is based, and the second position is defined on the y axis.

When you define a perspective-origin attribute for an element, its child elements get a transparent-visual effect, not the element itself. Must be used with the perspective attribute, and only 3D conversion elements are affected. (W3school)

Transform-style

Perspective comes again, yes, it is the key to 3D in css. Transform-style defaults to flat. If you want to see 3D effects on elements, you must use transform-style: preserve-3d, otherwise it is just a plane transformation, not a 3D transformation.

Show you css3-3D by hand.

We know a little bit about the concept above, so let's start the actual combat.

Let's see an effect, isn't it cool ~

If the picture doesn't load, visit https://bupt-hjm.github.io/css3-3d/ directly.

Step 1: html structure

A very simple container wraps a piece-box with six piece

Step 2: add the necessary 3D attributes to enter the 3D world

Through the explanation above, you should be familiar with perspective.

/ * 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 3: 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%;-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 finish this step, you still only see a square, which is our piece-6, because our 3Dtransform hasn't started yet.

Step 4: 3D transformation attack

First of all, the realization of the walking lantern, we do not let it go, first realize the lamp part.

How can it be realized? Because to form a circle, the circle is 360 degrees, and we have six piece, it's easy to think that we need to rotateY each piece by 60 degrees, as follows

How to pull them away from the center?

We also need to note here that after we rotate the element around the Y axis, the X axis and Z axis will also rotate, so the vertical line of each face of the cube is still the Z axis, so we just need to change the value of translateZ, and when the translateZ is positive, we come in our direction, so we can pull it open.

But how to measure the distance?

Is it clear at a glance?

Next, let's modify the css.

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 walking lantern been realized?

Step 5: animation makes 3D move

In order to realize the walking light, it is actually very simple. All we have to do is add a rotation animation to the piece-box, and complete the animation in 5 seconds, rotating 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 * /} / * Walking Lantern 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);}}

Let's not put gif here. Does hhh achieve a cool effect? it's not over yet. Oh, the cooler cube assembly.

Cube, in fact, is not difficult to achieve. I will not elaborate on it here. You can first imagine one side, and then expand how to achieve it. For example, we put the front translateZ (100px) of the cube close to our 100px, and then the back translateZ (- 100px) keeps it away from our 100px. On the left is first translateX (- 100px and then rotateY (90deg), on the right is translateX (100px) and then rotateY (90deg). Above is translateY (- 100px), rotateX (90deg). The following is the first translateY (100px), rotateX (90deg), as long as we write into the animation, everything is done.

Css is as follows. Here is only piece1. Other readers can implement it by analogy, or look at my source code.

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 will find that I used an animation-fill-mode: forwards;, this is actually to let these piece maintain the final effect of the animation, that is, the cube effect, readers can not try, it will still be restored.

Finally, there is the rotation of the cuboid. In front of our container, we have already used animation. Readers may think that if I add a class to put animaiton, the hhh,animaiton will cover the front, and the animation of the walking lantern in front will be gone, so in the html structure, I added another box to wrap the piece, as follows

In the animation, we can control the delay time of the cube animation, that is, wait until the cube assembly is completed before starting the animation.

Animation: boxRotate 5s 10s infinite; the first 5s is the animation time, the second 10s is the delay time, and then we rotate the cube from 0 to 360 degrees around the X axis and 0 to 360 degrees around the Y axis.

.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 (rotateY);) -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) This is the end of "how to master CSS3 3D technology". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.