实现效果:
绘制步骤:
① 绘制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);
}