CSS的3D应用：绘制立方体

实现效果：

绘制步骤：

① 绘制6个正方形

② 旋转各个正方形的角度

③ 摆放各个正方形的位置

代码实现：

<div class="cube">
	<div class="bottom">下</div>
	<div class="top">上</div>
	<div class="right">右</div>
	<div class="left">左</div>
	<div class="back">后</div>
	<div class="front">前</div>
</div>

cube样式中margin和transform属性并不影响立方体的绘制，即去除这两行代码也依然是完成了正方体的绘制。但由于绘制出来的正方体是从正前面展示的，因此看上去就只是二维平面的正方形而已，所以我采用transform旋转X和Y轴调整视角，而margin也是调整整体边距。

.cube {
	margin: 72px;
	transform: rotateX(-30deg) rotateY(30deg);
	transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */
}
.cube div {
	width: 144px;
	height: 144px;
	position: absolute;
	opacity: 0.5; /* 半透明效果方便查看绘制情况 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.back {
	background-color: #9900FF;
	transform: rotateY(180deg) translateZ(72px);
	
}
.right {
	background-color: #99CCCC;
	transform: rotateY(90deg) translateZ(72px);
	
}
.left {
	background-color: #00CC00;
	transform: rotateY(-90deg) translateZ(72px);
}
.top {
	background-color: #0099FF;
	transform: rotateX(90deg) translateZ(72px);
}
.bottom {
	background-color: #FFCC00;
	transform: rotateX(-90deg) translateZ(72px);
}
.front {
	background-color: #FF5757;
	transform: rotateY(0deg) translateZ(72px);
}