在CSS3中，使用transform屬性可以對元素進(jìn)行旋轉(zhuǎn)、縮放、扭曲等各種變形效果。其中，使用transform屬性可以制作出3D圓柱的效果。

.cylinder {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.cylinder:before,
.cylinder:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #D1D1D1;
border: 1px solid #000000;
box-sizing: border-box;
}
.cylinder:before {
transform: perspective(100px) rotateY(0deg) translateZ(50px);
}
.cylinder:after {
transform: perspective(100px) rotateY(90deg) translateZ(50px)translateX(100px);
}

我們可以用一個(gè)div容器來制作一個(gè)圓柱，然后在這個(gè)容器中使用:before和:after選擇器來制作出圓柱的兩個(gè)面。利用rotateY函數(shù)可以將盒子順時(shí)針或逆時(shí)針旋轉(zhuǎn)。

使用translateZ函數(shù)可以將任何對象在三維平面上移動(dòng)。當(dāng)我們將背面的圓柱面移動(dòng)到前面時(shí)，需要用到perspective函數(shù)。

總結(jié)：利用CSS3的transform屬性，利用:before和:after選擇器和perspective、rotateY、translateZ等函數(shù)，我們可以很簡單地實(shí)現(xiàn)3D圓柱的效果。