css3画圆柱3d |css动态电子表

.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的元素，它的大小为100×100，并设置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属性，否则无法显示出大家画的圆柱。