Note: (this code does not solve the compatibility problem yet, and can run smoothly in google browser)
Target effect
After the mouse is moved in, the picture starts to rotate and translate in turn. After the rotation and translation is completed, the hexahedron starts to rotate
Basic ideas
- First, add the top sight distance to the html to ensure the translation of the z axis
- Secondly, use the hover effect, use transform to flip, use the transition transition effect to rotate and translate the picture, and use animation to play the animation all the time.
- Then, to reflect "sequential", you need to add a delay effect in transition
- Finally, you need to add transform style to add a stereo effect to the cube
code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*Add sight distance*/
html {
perspective: 800px;
}
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
/* Set 3d deformation effect */
transform-style: preserve-3d;
animation: rotate 20s 12s infinite linear;
}
.cube > div {
width: 200px;
height: 200px;
/* Sets the transparency effect for the element */
opacity: 0.7;
position: absolute;
}
img {
/* Remove the baseline of the picture */
vertical-align: text-top;
}
.box1 {
transition: all 2S ;
}
.box2 {
transition: all 2S 2s;
}
.box3 {
transition: all 2S 4s;
}
.box4 {
transition: all 2S 6s;
}
.box5 {
transition: all 2S 8s;
}
.box6 {
transition: all 2S 10s;
}
.cube:hover .box1 {
transform: rotateY(90deg) translateZ(100px);
}
.cube:hover .box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.cube:hover .box3 {
transform: rotateX(90deg) translateZ(100px);
}
.cube:hover .box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.cube:hover .box5 {
transform: rotateY(180deg) translateZ(100px);
}
.cube:hover .box6 {
transform: rotateY(0deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
</style>
</head>
<body>
<!-- Create 1 a container -->
<div class="cube">
<!-- Import picture -->
<div class="box1">
<img src="./image/1.jpg" alt="">
</div>
<div class="box2">
<img src="./image/2.jpg" alt="">
</div>
<div class="box3">
<img src="./image/3.jpg" alt="">
</div>
<div class="box4">
<img src="./image/4.jpg" alt="">
</div>
<div class="box5">
<img src="./image/5.jpg" alt="">
</div>
<div class="box6">
<img src="./image/6.jpg" alt="">
</div>
</div>
</body>
</html>
Please download the pictures online and put them in the corresponding directory
Main difficulties
Bloggers, as beginners, put forward some difficulties in their own production. Experts can skip them directly.
- At first, the blogger used the effect of adding animation to show animation after the hover effect, which is feasible to run. However, when the mouse is removed, the transition effect is lost and the playback is stopped directly, without the effect of returning to the original position one by one.
- The second point is also a problem for many beginners. After the rotate of the transform attribute is rotated, its original multiple corresponding coordinate axes will also change. For example, after transform: rotate (90DEG), its X-axis will become an inverse extension line to the original z-axis, the z-axis will become the original x-axis, and the y-axis will remain unchanged. Therefore, the subsequent translation will translate around the z-axis, If you don't understand, you can draw a picture and try it yourself.
- The third point is the angle of rotation. Here bloggers use a method to remember, that is, clockwise. No matter rotating around the x, y and z axes, as long as it is positive, it is clockwise. You can draw a circle by yourself.
- The fourth point is to learn from the delay effect of a blogger, The previous animation effect (rotation and translation) is that all pictures are performed at the same time, without the feeling of sequence. It is necessary to add transition delay to achieve the "sequence" effect, that is, after the previous picture is turned over, the next picture starts to turn over. Note: you can't rotate all the following div s at the same time, and the delay effect will be lost. The blogger's article link address: CSS3 easily realizes color rotating hexahedron animation Author: Night Wu ran
Finally, I recommend you to see the front-end css tutorial of Teacher Li Lichao at station b Station b: Mr. Li Lichao , this article is also slightly revised on the basis of the teacher.