CSS旋轉(zhuǎn)正方體

代碼如下：
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
font-weight: bold;
}
.cube .front {
background-color: red;
transform: translateZ(100px);
}
.cube .back {
background-color: yellow;
transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
background-color: blue;
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
background-color: green;
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
background-color: white;
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
background-color: purple;
transform: rotateX(-90deg) translateZ(100px);
}
使用CSS3的3D變換可以很容易的實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的正方體，使用transform-style: preserve-3d;可以保證該元素的子元素也可以應(yīng)用3D變換，同時(shí)將每個(gè)面的背景色設(shè)置不同，用transform來(lái)控制旋轉(zhuǎn)方向和距離，就可以實(shí)現(xiàn)一個(gè)完整的3D正方體。