CSS3 3D 場(chǎng)景代碼示例

.scene {
perspective: 1000px; /* 視距 */
transform-style: preserve-3d; /* 保留 3D 空間 */
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d; /* 保留 3D 空間 */
transition: transform 1s; /* 動(dòng)畫過(guò)渡效果 */
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0 0 50px rgba(0,0,0,.8);
text-align: center;
font-size: 24px;
color: #fff;
line-height: 200px;
}
.cube-front {
transform: translateZ(100px);
background-color: #f00;
}
.cube-back {
transform: translateZ(-100px) rotateY(180deg);
background-color: #00f;
}
.cube-right {
transform: rotateY(-90deg) translateZ(100px);
background-color: #0f0;
}
.cube-left {
transform: rotateY(90deg) translateZ(100px);
background-color: #ff0;
}
.cube-top {
transform: rotateX(-90deg) translateZ(100px);
background-color: #0ff;
}
.cube-bottom {
transform: rotateX(90deg) translateZ(100px);
background-color: #f0f;
}
.cube:hover {
transform: rotateX(360deg) rotateY(360deg); /* 鼠標(biāo) hover 時(shí)旋轉(zhuǎn) */
}

代碼解析：

1.  .scene 類設(shè)定場(chǎng)景視距和保留 3D 空間。
2.  .cube 類設(shè)定立方體屬性和保留 3D 空間。
3.  .cube-face 類設(shè)定立方體面的基本屬性，如寬高、陰影、文字、背景顏色等。
4.  .cube-front、.cube-back、.cube-right、.cube-left、.cube-top、.cube-bottom 分別設(shè)定不同立方體面的 transform 屬性，如 translateZ、rotateY、rotateX 等。
5.  當(dāng)鼠標(biāo) hover 到 .cube 類時(shí)，通過(guò) transform 屬性設(shè)置旋轉(zhuǎn)效果。