在CSS3中，使用transform屬性可以對元素進行旋轉、縮放、扭曲等各種變形效果。其中，使用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);
}

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

使用translateZ函數可以將任何對象在三維平面上移動。當我們將背面的圓柱面移動到前面時，需要用到perspective函數。

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