css3画3d圆柱 |css 声明 结束

.cylinder {
/* 设置圆柱的宽度、高度和深度 */
width: 200px;
height: 150px;
perspective: 500px;
transform-style: preserve-3d;
}
.cylinder .side {
/* 设置圆柱两端的样式 */
width: 200px;
height: 150px;
background: #ccc;
position: absolute;
}
.cylinder .side.top {
/* 设置圆柱顶部的样式 */
transform: rotateX(-90deg) translateY(-75px);
}
.cylinder .side.bottom {
/* 设置圆柱底部的样式 */
transform: rotateX(90deg) translateY(-75px);
}
.cylinder .side:before {
/* 给圆柱两端添加内部的效果 */
content: "";
width: 200px;
height: 150px;
position: absolute;
background: inherit;
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
}
.cylinder .side.top:before {
/* 确定顶部圆柱内部的位置 */
transform: rotateY(90deg) translateZ(75px);
}
.cylinder .side.bottom:before {
/* 确定底部圆柱内部的位置 */
transform: rotateY(-90deg) translateZ(75px);
}
.cylinder .side.front {
/* 确定圆柱两侧的样式，需要添加渐变效果实现3D效果 */
width: 150px;
height: 150px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
position: absolute;
transform: translateZ(75px);
}
.cylinder .side.back {
/* 确定圆柱两侧的样式，需要添加渐变效果实现3D效果 */
width: 150px;
height: 150px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
position: absolute;
transform: rotateY(180deg) translateZ(-75px);
}

以上就是3D圆柱的CSS3实现代码，大家可以根据自己的需求进行修改，如设置不同的颜色、大小等，来实现不一样的3D效果。