css3 3d圆环

CSS3 3D 圆环是一种比较炫酷的效果，它可以让页面有立体的效果。下面我们将通过代码来实现这个效果。

  <div class="circle">
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
  </div>

  <style>
    .circle {
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      perspective: 600px;
    }

    .ring {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 4px solid #fff;
      border-radius: 50%;
      animation: rotate 12s linear infinite;
    }

    .ring:nth-child(1) {
      transform: rotateX(0deg) translateZ(0);
    }

    .ring:nth-child(2) {
      transform: rotateX(60deg) translateZ(0);
    }

    .ring:nth-child(3) {
      transform: rotateX(120deg) translateZ(0);
    }

    .ring:nth-child(4) {
      transform: rotateX(180deg) translateZ(0);
    }

    .ring:nth-child(5) {
      transform: rotateX(240deg) translateZ(0);
    }

    .ring:nth-child(6) {
      transform: rotateX(300deg) translateZ(0);
    }

    @keyframes rotate {
      from {
        transform: rotateY(0);
      }

      to {
        transform: rotateY(360deg);
      }
    }
  </style>

以上代码，我们首先创建了一个父元素 `div.circle`，它的宽度和高度分别为 200px，在 CSS 中设置了 `transform-style: preserve-3d;` 和 `perspective: 600px;`，这样就可以让圆环有立体的效果。

接下来我们通过 `div.ring` 去创建六个环，每个环的宽度和高度都为 100%（也就是跟父元素的宽高一样），然后通过 `border-radius: 50%;` 的属性来让它变成一个圆形。再通过 `transform: rotateX()` 的属性来设置环的位置，这里设置了六个不同的角度，从而形成了一个 3D 的圆环。

最后使用 `@keyframes` 来让环不断旋转，从而形成了一个神奇的效果。