css3 绕Z轴旋转的球

CSS3绕Z轴旋转的球，顾名思义就是利用CSS3的3D旋转效果制作出一个球体，让球体在3D空间中动起来。下面，我们将介绍如何使用CSS3来制作这个效果。

/* 先定义一个容器 */
.container{
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}
/* 定义球体 */
.ball{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  background: #007bff;
  border-radius: 50%;
  animation: rotate 5s infinite linear;
  transform-style: preserve-3d;
}
/* 定义球体旋转动画 */
@keyframes rotate{
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}

以上代码中，我们定义了一个容器和一个球体，容器使用了perspective属性，这是实现3D效果的关键之一。perspective属性指定容器到观察点的距离，单位是像素。它会影响到后代元素的3D效果。

球体的位置是使用了绝对定位和负边距实现的。球体的旋转动画是使用了CSS3的关键帧动画实现的。我们在关键帧中，定义了从0度到360度之间的旋转效果。

最后，通过transform-style属性，我们在球体上启用了3D效果并使用rotateZ函数执行绕Z轴旋转。这样就实现了一个简单的CSS3绕Z轴旋转的球体。