Without further ado, let’s go to demo
- Cool CSS3 Lantern/Cube animation: bupt-hjm.github.io/css3-3d/
- Github source code:Github.com/BUPT-HJM/cs…
- Cool CSS3 page-turning animation: Bupt – HJM. Making. IO/CSS 3 – flip – b…
- Github source code:Github.com/BUPT-HJM/cs…
The above are pure CSS3 implementation, did not use any JS code, hope to get everyone’s star ~
If format appear problem, this article also synchronized hair on my blog bupt – HJM. Making. IO / 2016/07/26 /… And welcome to pay attention.
Css3 3d start
In order to play WITH CSS3 3D, you need to know a few words: Perspective, rotate, and translate. Perspective is the act of looking at 2D objects on a screen from a realistic perspective to create a 3D effect. The rotation is no longer the rotation on the 2D plane, it’s the rotation on the 3D coordinate system, the X, Y, Z axis. Same thing with translation.
Of course, in theory, I guess you don’t understand. Here are 3 giFs:
- Rotate along the X-axis
- We rotate along the Y axis
- Rotate along the Z axis
I should be able to rotate, so it’s a little bit easier to understand the translation, which is moving in the X, Y, and z axes.
You might say perspective is a little hard to understand, but let me introduce a few properties of perspective.
perspective
perspectiveEnglish name is perspective, there is no way to create 3D effect without this thing, but how does this thing enable our browser to create 3D effect, you can see the following picture, in fact, learned painting should know perspective, and here is the truth.
But in CSS it has numeric values, such as perspective: 1000px. What does this mean? We can understand that if we look directly with our eyes against the object, the object will be huge and occupy our sight. The distance between us and the object becomes larger and smaller, and the three-dimensional sense will come out. Yes, in fact, this value constructs the distance between our eyes and the screen, which also constructs a virtual 3D illusion.
perspective-origin
Perspecties-origin can also be interpreted from perspecties-origin. The distance between the eyes and the object and the line of sight can be interpreted from perspecties-origin. Perspecties-origin is perspecties-origin by default. 50%, 50%. The first value is the X-axis on which the 3D element is based, and the second value is defined on the Y-axis
When you define the Perspective-Origin attribute for an element, its children get perspective, not the element itself. Must be used with the Perspective attribute and only affects 3D transformation elements. (W3school)
transform-style
Transform-style is flat by default. If you want to see 3D effects on elements, you must use transform-style: Preserve-3d, otherwise it’s just a plane transformation, not a 3D transformation
Take you hand in hand to play CSS3-3D
Above we have a little understanding of the concept, let’s start the actual combat! Let’s see an effect, isn’t it cool ~
IO /css3-3d/. If the image does not load, go to but-hjm.github. IO /css3-3d/
Step 1: HTML structure
A simple container wrapped around a piece-box containing six pieces
<div class="container">
<div class="piece-box">
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>Copy the codeStep 2: Add the necessary 3D attributes and enter the 3D world
From the above explanation, 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;
}Copy the codeStep 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% 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;
}Copy the codeOf course, after you’ve done this you’ll only see one square, which is ourspiece-6Because of our 3DtransformHaven’t started
Step 4:3D transformation comes
The first is to realize the lantern, we don’t let it go, first to achieve the lamp part. How do you do that? Because to form a circle, the circle is 360 degrees, and we have six pieces, it’s easy to imagine that we need to incrementally increase each piece by 60 degreesrotateY, becomes the following
How do you pull them away from the center?
Here we should also note 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, we just need to change the value of translateZ, and when the translateZ is positive, it will move in our direction, so we can pull it apart
But how to measure the distance?
Is it clear at a glance ~
Now let’s modify the CSS
.piece-1 {
background: #FF6666;
-webkit-transform: rotateY(0deg) translateZ(173.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px); }.piece-2 {
background: #FFFF00;
-webkit-transform: rotateY(60deg) translateZ(173.2 px);-ms-transform: rotateY(60deg) translateZ(173.2 px);-o-transform: rotateY(60deg) translateZ(173.2 px);transform: rotateY(60deg) translateZ(173.2 px); }.piece-3 {
background: # 006699;
-webkit-transform: rotateY(120deg) translateZ(173.2 px);-ms-transform: rotateY(120deg) translateZ(173.2 px);-o-transform: rotateY(120deg) translateZ(173.2 px);transform: rotateY(120deg) translateZ(173.2 px); }.piece-4 {
background: # 009999;
-webkit-transform: rotateY(180deg) translateZ(173.2 px);-ms-transform: rotateY(180deg) translateZ(173.2 px);-o-transform: rotateY(180deg) translateZ(173.2 px);transform: rotateY(180deg) translateZ(173.2 px); }.piece-5 {
background: #FF0033;
-webkit-transform: rotateY(240deg) translateZ(173.2 px);-ms-transform: rotateY(240deg) translateZ(173.2 px);-o-transform: rotateY(240deg) translateZ(173.2 px);transform: rotateY(240deg) translateZ(173.2 px); }.piece-6 {
background: #FF6600;
-webkit-transform: rotateY(300deg) translateZ(173.2 px);-ms-transform: rotateY(300deg) translateZ(173.2 px);-o-transform: rotateY(300deg) translateZ(173.2 px);transform: rotateY(300deg) translateZ(173.2 px); }Copy the codeIs it already a merry-go-round?
Step 5: Animation makes 3D move
In order to realize the revolving motion, it is actually very simple. We only need to add the rotation animation on the piece-box. 5S completes the animation and rotates 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 */
}
/* * */
@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);}
}Copy the codeHere I will not put GIF ~ HHH is not to achieve cool effect, not over oh ~ more cool cube assembly
Cube is actually not too difficult to realize, and I’m not going to go into details here, but you can imagine one surface first, and then expand on how to realize other surfaces, For example, we make the front cube translateZ(100px) close to us 100px, and the back cube (-100px) translateZ(-100px) far away from us 100px, the left side is translateX(-100px then rotateY(90deg), and the right side is trans LateX (100px) and rotateY(90deg). The top is translateY(-100px) and rotateX(90deg). The bottom is translateY(100px) and rotateX(90deg).
CSS is as follows, piece1 only, other readers can compare their own implementation, or see my github source code
.piece-1 {
background: #FF6666;
-webkit-transform: rotateY(0deg) translateZ(173.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px);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.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px); 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.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px); 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.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px); 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.2 px);-ms-transform: rotateY(0deg) translateZ(173.2 px);-o-transform: rotateY(0deg) translateZ(173.2 px);transform: rotateY(0deg) translateZ(173.2 px); 100%} {-webkit-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);}
}Copy the codeAttentive readers can see that I used animation-fill-mode: forward; In fact, this is to keep these pieces the final effect of the animation, that is, the effect of the cube. Readers can not try it, it will still be restored.
The last part is the cube rotation. We have already used animation in the previous container. Readers may think that I will add another class to put animaiton. I also added a box package, piece, as follows
<div class="container">
<div class="piece-box">
<div class="piece-box2"><! -- New container -->
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>
</div>Copy the codeAnimation: boxRotate 5s 10s infinite; animation: Rotate 5s 10s infinite; The first 5s is the animation duration, and the second 10s is the delay time. Then we rotate the cube from 0 to 360 degrees around the X axis and 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; / / @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); }}Copy the codeFinal effect, done!
At the end of the article
Have you also implemented cool CSS-3D effects?
Welcome stampede github.com/BUPT-HJM/cs… Remember to give it to star
You are also welcome to follow my blog bupt-hjm.github. IO /
reference
www.zhangxinxu.com/wordpress/2…
I also read many articles/blogs on the Internet and learned a lot, so I also hope to write one to share with you ~ thanks for reading.
It can be reproduced and quoted freely, but the author must be signed and indicate the source of the article.