Awebone's Blog

CSS3实现3D魔方

CSS3实现3D魔方

实现思路

  • 写出基础HTML框架

  • 基本CSS样式,初始化

  • CSS实现魔方的各个面:外轮廓和内盒子

  • CSS3实现魔方表面的3D位置

  • CSS3实现旋转

第一步:HTML结构

六个面类似如下结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1>3D魔方</h1>
<div class="view">
<div class="box">
<div class="red-surfaces">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
<div id="nine"></div>
</div>
</div>
</div>

第二步:CSS初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
margin: 0px;
padding: 0px;
}
body {
min-height: 600px;
height: 100%
}
body h1 {
margin-top: 50px;
text-align: center;
}
.view {
margin: -60px auto;
width: 800px;
height: 800px;
position: relative;
border-radius: 20px;
-webkit-transform: scale(0.7);
}

第三步:CSS实现魔方的各个面:外轮廓和内盒子

外轮廓样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.red-surfaces,
.blue-surfaces,
.green-surfaces,
.white-surfaces,
.orange-surfaces,
.yellow-surfaces {
height: 330px;
width: 330px;
position: absolute;
border-radius: 5px;
top: 235px;
left: 235px;
}

内盒子样式

1
2
3
4
5
6
7
8
9
10
11
12
.red-surfaces>div,
.blue-surfaces>div,
.green-surfaces>div,
.white-surfaces>div,
.orange-surfaces>div,
.yellow-surfaces>div {
height: 100px;
width: 100px;
display: inline-block;
border: 5px solid rgba(170, 170, 170, 0.9);
position: absolute;
}

内盒子颜色 : 六面

1
2
3
.red-surfaces>div {
background-color: rgba(255, 0, 0, 0.8);
}

内盒子定位 :九个小块

1
2
3
4
#one {
left: 0px;
top: 0px;
}

第四步:CSS3实现魔方表面的3D位置

六个表面不同角度设置

1
2
3
.red-surfaces {
-webkit-transform: rotateX(-90deg) translateZ(165px);
}

第五步:CSS3实现旋转

keyframe定义 :animation

  • name规定需要绑定到选择器的keyframe名称
  • duration规定完成动画所花费的时间,以秒或毫秒计
  • timing-function规定动画的速度曲线
  • delay规定在动画开始之前的延迟
  • iteration-count规定动画应该播放的次数
  • direction规定是否应该轮流反向播放动画
1
2
3
.box{
-webkit-animation:BoxRotate 3s ease-in-out infinite;
}

动画旋转基准 : transform-origin

1
2
3
.box{
-webkit-transform-origin: 400px 400px 200px;
}

3D实现:transform-style

1
2
3
.box{
-webkit-transform-style: preserve-3d;
}

keyframe定义旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@-webkit-keyframes BoxRotate {
16% {
-webkit-transform: rotateY(-90deg) rotateZ(135deg);
}
33% {
-webkit-transform: rotateY(-90deg) rotateX(135deg);
}
50% {
-webkit-transform: rotateY(225deg) rotateZ(135deg);
}
66% {
-webkit-transform: rotateY(135deg) rotateX(135deg);
}
83% {
-webkit-transform: rotateX(135deg);
}
}

总结

CSS3也可以实现js实现的动画,而且还减少资源消耗,要熟练掌握新特性。

源码地址:github-xuyanbo03