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

.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);
}

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

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

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

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