1. 效果展示
front
back
left
right
top
bottom
rotateX -40°
rotateY 50°
rotateZ 0°
2. 绘制
正六面体各个面的夹角均为90°、每个面均为正方形，所以正六面体的绘制相比正四面体的绘制要简单很多。绘制过程是通过平移、旋转各个面来实现。
2.1 html结构
<div class="camera">
<div class="space">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2.2 平移
已原点(0,0)为起点，对各个面进行平移。back在front正后方(translateZ(-100px))。
.front { transform: translateX(50px) translateY(50px); }
.back { transform: translateX(50px) translateY(50px) translateZ(-100px); }
.left { transform: translateX(-50px) translateY(50px); }
.right { transform: translateX(150px) translateY(50px); }
.top { transform: translateX(50px) translateY(-50px); }
.bottom { transform: translateX(50px) translateY(150px); }
1
2
3
4
5
6
2
3
4
5
6
2.3 旋转
front面不需要旋转back面‘原地’旋转180度- 其余面需要确定各自的旋转轴。不难看出，各个面的旋转轴也就是
front各个边。
.back { transform-origin: center center; transform: rotateY(180deg); }
.left { transform-origin: right center; transform: rotateY(-90deg); }
.right { transform-origin: left center; transform: rotateY(90deg); }
.top { transform-origin: bottom center; transform: rotateX(90deg); }
.bottom { transform-origin: top center; transform: rotateX(-90deg); }
1
2
3
4
5
2
3
4
5
3. 总结
拼接正六面体的方式不止一种，本示例是通过先平移后旋转的方式实现。也可以通过先旋转，后平移的方式实现。其实，掌握了绘制正四面体及绘制正六面体的基本知识后，绘制正N面体也是同样的原理。