css实现3D圆球

CSS实现3D圆球是一种炫酷的效果，可以让网站更加生动有趣。下面我们就来介绍一下如何实现它。

  /* 先定义一个包含所有球的容器 */
  .container {
    perspective: 1000px; /* 定义视距 */
  }
  
  /* 定义球体 */
  .sphere {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  
  /* 定义球体上的图案、颜色等 */
  .sphere:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff00ff;
    transform: translateZ(100px);
  }
  
  /* 定义球体的旋转动画 */
  @keyframes rotate {
    0% {
      transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }

以上代码定义了一个包含球体的容器，球体的各个属性（包括形状、颜色等）以及旋转动画。需要注意的是，实现3D效果的关键在于使用了perspective属性以及transform属性，这两个属性都是CSS3新特性。

最后，我们只需要在HTML代码中将球体放入包含球体的容器中即可。