CSS3的3D變換功能讓頁(yè)面的呈現(xiàn)更加生動(dòng)，圓柱體3D旋轉(zhuǎn)也成為了一種熱門的效果。

.card {
width: 80px;
height: 120px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(10deg);
}
.card:before, .card:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3f3f3f;
box-shadow: 0 0 5px rgba(0,0,0,.5);
transform-style: preserve-3d;
}
.card:before {
transform: rotateY(90deg) translateZ(60px);
}
.card:after {
transform: rotateY(-90deg) translateZ(60px);
}
.card .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
transform-style: preserve-3d;
transform: translateZ(30px);
}
.card .content h1 {
margin: 0;
font-size: 20px;
color: #fff;
text-align: center;
}

以上代碼使用了transform-style屬性的preserve-3d值，這意味著被旋轉(zhuǎn)的元素以3D方式渲染而不是以平面樣式呈現(xiàn)。通過(guò)rotateX和rotateY搭配transform-origin屬性，可以使元素在以x和y軸為中心進(jìn)行旋轉(zhuǎn)。此外，使用了:before和:after偽元素，分別作為圓柱體的前面和后面進(jìn)行渲染。

除此之外，還需為對(duì)應(yīng)的內(nèi)容區(qū)域設(shè)置一個(gè)Z軸的偏移量，例如使用translateZ屬性。其中，translateZ的值即是元素距離觀察者（視點(diǎn)）的距離。這樣就可以使內(nèi)容區(qū)域通過(guò)Z軸偏移從而與圓柱體建立起層級(jí)關(guān)系并實(shí)現(xiàn)視覺(jué)效果。