正方体3d旋转
最近在查询webpack文档时发现一个有意思动画，作为程序员既然看到了那么就要研究它是如何实现的。
很明显，上面的正方体是由不同的div块经过transform变换再拼接形成，所以首先我们要绘制出正方体。
将正方体6个面分成前、后、上、下、左、右，再分别对应其位置，设定正方体边长为120px，具体位置如下：
- 前：将块在
z轴上平移60px - 后：将块在
z轴上平移-60px - 上：将块在
y轴上平移-60px再绕x轴旋转90deg - 下：将块在
y轴上平移60px再绕x轴旋转90deg - 左：将块在
x轴上平移-60px再绕y轴旋转90deg - 有：将块在
x轴上平移60px再绕y轴旋转90deg具体代码实现如下：
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
body {
background: #2b3a42;
}
.box {
position: relative;
margin: 40px;
width: 120px;
height: 120px;
div {
position: absolute;
width: 100%;
height: 100%;
background: #8dd6f980;
border: 1px solid white;
}
.front {
transform: translateZ(60px);
}
.back {
transform: translateZ(-60px);
}
.top {
transform: translateY(-60px) rotateX(90deg);
}
.bottom {
transform: translateY(60px) rotateX(90deg);
}
.left {
transform: translateX(-60px) rotateY(90deg);
}
.right {
transform: translateX(60px) rotateY(90deg);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
直接运行上面代码是不能看到正方体的，因为我们没有开启3d视角，默认看到的东西都是在一个平面内
这里需要使用transform-style: preserve-3d;设置元素位于3d空间中，再将box进行简单的旋转使之在空间中更加明显
.box {
...
// 添加属性
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-30deg) ;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
到这里我们就得到了一个正方体，剩下的旋转就更加简单了，使用@keyframes制作一个简单的旋转动画即可。
.box {
...
// 添加动画
animation: 5s infinite rotate;
}
/* 从初始角度-30deg 按照每次旋转90deg设计 */
@keyframes rotate {
0% {
transform: rotateX(-30deg) rotateY(60deg);
}
25% {
transform: rotateX(-30deg) rotateY(150deg);
}
50% {
transform: rotateX(-30deg) rotateY(240deg);
}
75% {
transform: rotateX(-30deg) rotateY(330deg);
}
100% {
transform: rotateX(-30deg) rotateY(420deg);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
到这里最困难的正方体绘制旋转就完了，如果要完全实现webpack的效果只需要调整box的初始旋转角度和重复绘制一个更小的正方体，这里就不再废话了。(oﾟ▽ﾟ)o
上次更新: 2025/09/05, 8:09:00