CSS3是Web前端開發中非常重要的一個技術，它使得我們能夠在網頁中實現更加豐富的效果。其中，畫圓柱3D是一種非常炫酷的效果，下面我們來看看如何使用CSS3實現。

.cylinder {
width: 100px;
height: 100px;
position: relative;
perspective: 200px;
}
.cylinder:before,
.cylinder:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50px;
border-radius: 50%;
transform-style: preserve-3d;
transform-origin: 50% 50% 0;
}
.cylinder:before {
left: 0;
transform: rotateY(-30deg) translateZ(25px);
box-shadow: 0 0 5px #999;
}
.cylinder:after {
right: 0;
transform: rotateY(30deg) translateZ(25px);
box-shadow: 0 0 5px #999;
}

以上是畫圓柱3D的核心代碼，我們來一一解析。

首先定義了一個class名為cylinder的元素，它的大小為100x100，并設置position為relative。接著設置perspective屬性，就是3D視角的大小，我們這里設置了200px。

接下來定義了cylinder的偽元素:before和:after，它們都是圓形，大小為50px，使用了border-radius屬性來實現。此外，我們還設置了transform-style屬性，這個屬性表示該元素的所有子元素都使用同一個3D空間。

在:before和:after中，我們使用了transform屬性來實現角度的旋轉。其中，-30deg表示向左旋轉，30deg表示向右旋轉，translateZ表示在Z軸上的平移距離，這里設置為25px，即兩個圓之間的距離。另外，我們還使用了box-shadow屬性來實現圓柱的陰影效果。

通過以上代碼，我們就能實現畫圓柱3D效果了，不過還需要注意一點：在HTML中，需要給cylinder元素設置一個空的content屬性，否則無法顯示出我們畫的圓柱。