前端css实现3D魔方,先看一下效果图:
盒子布局
将3D魔方的6个面包裹在一个父盒子中
1 | <div class="content"> |
添加3D效果
给父盒子添加相对定位和3D属性
1
2
3
4
5
6
7
8
9
10
11
12
13.parent {
/* 相对定位 */
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
/* 3D属性 */
transform-style: preserve-3d;
/* 旋转动画 */
animation-name: rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
}给子盒子添加绝对定位,并移动、旋转子盒子
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
35
36
37
38
39
40
41
42
43.parent>div {
position: absolute;
width: 400px;
height: 400px;
border: 1px solid pink;
font-size: 40px;
line-height: 400px;
text-align: center;
}
.div1 {
top: -50%;
color: yellow;
transform: rotateX(90deg);
}
.div2 {
top: 50%;
color: white;
transform: rotateX(90deg);
}
.div3 {
left: -50%;
color: red;
transform: rotateY(90deg);
}
.div4 {
left: 50%;
color: orange;
transform: rotateY(90deg);
}
.div5 {
transform: translateZ(200px);
color: blue;
}
.div6 {
transform: translateZ(-200px);
color: green;
}效果:
给父盒子添加动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.parent {
/* 相对定位 */
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
/* 3D属性 */
transform-style: preserve-3d;
/* 旋转动画 */
animation-name: rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0)
}
100% {
transform: rotateX(360deg) rotateY(360deg)
}
}
整体代码
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 云开の博客!
评论