3D start of css3
To play CSS3's 3D, you must understand several vocabulary, namely perspective, rotation and translation. Perspective means looking at 2D things on the screen from a realistic perspective, thereby showing the effect of 3D. Rotation is no longer a rotation on the 2D plane, but a rotation of a three-dimensional coordinate system, including X-axis, Y-axis, and Z-axis rotation. The same goes for translation.
Of course, using theory to illustrate, you probably don’t understand. Here are 3 gifs:
Rotate along the X-axis
Rotate along the Y axis
Rotate along the Z axis
There should be no problem with rotation, so it is easier to understand translation, that is, move on the X-axis, Y-axis, and z-axis.
You may say that perspective is difficult to understand. Let me introduce several attributes of perspective.
perspective
The English name of perspective is perspective. Without this thing, there is no way to form a 3D effect. But how does this thing allow our browser to form a 3D effect? You can look at the picture below. In fact, those who have learned painting should know the perspective relationship, and this is the reason.
But in CSS it has numerical values, for example, what does 1000px represent? We can understand this way that if we look directly at the object, the object will be overwhelming and occupy our sight. Our distance from it is getting bigger and smaller, and the three-dimensional sense will appear. In fact, this value constructs the distance between our eyes and the screen, which also constructs a virtual 3D illusion.
perspective-origin
From the above we understand the perspective, and add what this origin is. The one we mentioned earlier is the distance from the object, and this is the line of sight of the eyes. The different positions of our viewpoint determine the different scenes we see. The default is the center, which is perspective-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 defining a perspective-origin attribute for an element, its child elements get perspective effects, not the element itself. Must be used with the perspective attribute and only affects 3D conversion elements. (W3school)
transform-style
perspective is here again. Yes, it is the key to 3D in CSS. Transform-style is flat by default. If you want to see the 3D effect on elements, you must use transform-style: preserve-3d, otherwise it is just a plane transformation, not a 3D transformation.
Take you to play with css3-3d step by step
We have a little understanding of the concept above, so let’s start the actual combat below!
Let's look at the effect, isn't it cool: directly visit https://bupt-hjm.github.io/css3-3d/, if you think it's OK, remember to give it to star hh
Step 1: HTML structure
A very simple container is wrapped with a piece-box containing 6 pieces
<div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></div>
Step 2: Add necessary 3D attributes to enter the 3D world
Through the above explanation, you should be more 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 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 general style*/.piece { position: absolute; width: 200px; height: 200px; background: red; opacity: 0.5;}.piece-1 { background: #FF6666;}.piece-2 { background: #FFF00;}.piece-3 { background: #006699;}.piece-4 { background: #009999;}.piece-5 { background: #FF0033;}.piece-6 { background: #FF6600;}Of course, after you complete this step you still only see a square, which is our piece-6, because our 3D transform has not started yet
Step 4: 3D transformation attack
The first thing is to realize the revolving lantern. We should not let it go first, realize the light part.
How to achieve it? Because to form a circle, the circle is 360 degrees and we have 6 pieces, then, it is easy to think that we need to rotate each piece in an increment of 60 degrees, and it becomes as follows
How to pull them out of the center?
Here we should also note that after we rotate the element around the Y axis, the X and Z axis will actually rotate, so the vertical line of each face of the cube is still the Z axis. We only need to change the value of translateZ. When translateZ is positive, we walk in our direction, so that we can pull it apart.
But how to measure the distance?
Is it clear at a glance?
Let's modify 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: #FFF00; -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); -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 revolving lantern been realized?
Step 5: Animation makes 3D move
To achieve the moving lantern, it is actually very simple. We just need to add rotation animation to the piece-box. Complete the animation in 5 seconds, rotate 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 */}/*Revolving lamp 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);}}I won't put gifs here~ Does hhh achieve cool effects? It's not over yet~ More cool cube assembly
It is actually not difficult to implement a cube. I won't go into details here. You can first imagine a face and then expand other faces to implement it. For example, we put the front translateZ (100px) of the cube close to our 100px, and then translateZ (-100px) and then move it away from our 100px. On the left is translateX (-100px, then rotateY (90deg), on the right is translateX (100px) and then rotateY (90deg), on the top is translateY (-100px), rotateX (90deg), on the bottom is translateY (100px), rotateX (90deg), and on the bottom is translateY (100px), rotateX (90deg). As long as we write it into the animation, everything will be done.
CSS is as follows. The following is only the piece1. Other readers can implement it by themselves, or look at 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(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); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px); 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); -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); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px);} }Careful readers can find that I used an animation-fill-mode: forwards;, which is actually to keep these pieces in the final animation effect, that is, the effect of the cube. Readers can try it without trying it, and it will still be restored to its original state.
Finally, the cube rotates. Our container in front has already used animation. Readers may think that I can add a class and put an animaiton. hhh, animaiton will cover the front, and the animation of the front lantern will be gone. So in the html structure, I added another box wrapping piece, as follows
<div> <div> <div><!--New container--> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div>
In animation, we can control the delay time of cube animation, that is, wait until the cube assembly is completed before starting animation
animation: boxRotate 5s 10s infinite; the first 5s is the animation duration, the second 10s is the delay time, and then we let the cube rotate, from 0 degrees to 360 degrees around the X axis, and also from 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 */}/*Cuboid 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);); 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);}}The final effect is complete!
The above are examples of implementation of CSS 3D. Students in need can refer to it. Thank you for your support for this site!