CSS3的出現(xiàn)為前端開發(fā)帶來了更多的玩法，其中之一就是格子立方體。

.container{
perspective: 800px;
transform-style: preserve-3d;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
.front{
transform: translateZ(50px);
}
.back{
transform: rotateX(180deg) translateZ(50px);
}
.right{
transform: rotateY(90deg) translateZ(50px);
}
.left{
transform: rotateY(-90deg) translateZ(50px);
}
.top{
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
transform: rotateX(-90deg) translateZ(50px);
}

通過設(shè)置container的perspective屬性以及box的transform-style屬性，使得元素能夠在三維空間中展示。

我們可以通過六個面的transform屬性分別進行坐標(biāo)變換，來構(gòu)造立方體。例如，front面通過translateZ將元素定位到坐標(biāo)系的前方。

同時，我們也可以變化不同的角度，實現(xiàn)不同立體效果的效果。例如，通過rotateY來改變yz平面上的旋轉(zhuǎn)角度，得到不同的旋轉(zhuǎn)效果。

CSS3的格子立方體為我們帶來更多實現(xiàn)三維效果的思路和方式，使得前端設(shè)計更加生動、豐富。趕快試試吧！