css 立方体旋转水晶

要实现立方体旋转水晶效果，可以使用 CSS3 的 3D 转换属性 `transform`，结合 `transition` 和 `animation` 属性来实现。

以下是一个简单的立方体旋转水晶示例：

HTML 代码：

<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
</div>

CSS 代码：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: rotate 6s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

上面的代码中，我们使用 `transform-style: preserve-3d` 属性来让子元素继承父元素的 3D 转换，使用 `transform-origin: center center` 属性来设置旋转中心为立方体中心。

然后，我们给每个面设置不同的 `transform` 属性，让它们在 3D 空间中呈现出立方体的形状。同时，我们还使用了 `transition` 属性来实现面的淡入淡出效果，使用 `animation` 属性来实现旋转动画效果。

最后，我们使用 `@keyframes` 定义了一个名为 `rotate` 的动画，让立方体不停地旋转起来。

通过这些属性的组合使用，我们就可以实现一个简单的立方体旋转水晶效果了。