css制作简单3d球体 |html如果通过js修改css

django 列表css，div css标准命名，css+选定奇数元素，css如何画各种形状，css行内背景图属性，css点击图片显示当前图片，html如果通过js修改css css制作简单3d球体 |html如果通过js修改css

.ball { 
position: relative; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
margin: 50px auto; 
transform-style: preserve-3d; 
} 
.ball:before, .ball:after { 
position: absolute; 
content: ""; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
background: #ccc; 
transform-style: preserve-3d; 
} 
.ball:before { 
transform: translateZ(-50px); 
} 
.ball:after { 
transform: rotateX(90deg) translateZ(-50px); 
}

首先大家先定义一个球体的父元素，命名为.ball。由于球体是3D的，所以需要设置transform-style属性为preserve-3d，以保留元素的3D空间关系。接着，在.ball中定义伪元素:before和:after，设置它们的宽高、圆角和背景颜色。其中:before的transform属性为translateZ(-50px)，将其向Z轴负方向平移50px。而:after则改变了它的transform属性，设置为先绕X轴旋转90度，再向Z轴负方向平移50px。

最后附上html代码如下：

<div class="ball"> </div>

如果想要球体更加立体感，可以通过设置阴影和变换的方式实现，具体方法可以自行尝试。