如何在 CSS 中制作 3D 旋转图像？

在 CSS 中，使用 transform 属性可以制作 3D 旋转图像。以下是实现 3D 旋转图像的步骤和代码示例。

步骤

1. 在 CSS 中创建一个容器。
2. 将容器的 transform-style 属性设置为 preserve-3d，以启用 3D 变换。
3. 使用 transform 属性设置容器的旋转角度，可以使用 rotateX、rotateY 或 rotateZ 进行旋转。
4. 在容器内创建要旋转的元素。
5. 使用 transform 属性设置要旋转的元素的位置和角度。

代码示例

<div class="container">
  <div class="box">
    <!-- 要旋转的元素 -->
  </div>
</div>

.container {
  transform-style: preserve-3d; /* 启用 3D 变换 */
  transform: rotateX(30deg) rotateY(30deg); /* 旋转容器 */
}

.box {
  position: absolute; /* 相对定位，用于设置元素的位置 */
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translateZ(50px); /* 设置元素在 z 轴上的位置 */
}

在上面的代码示例中，容器使用 rotateX 和 rotateY 进行了旋转，而要旋转的元素则使用了 translateZ 设置了在 z 轴上的位置。可以根据实际需求，调整容器的旋转角度和要旋转的元素的位置和角度，以实现不同的 3D 旋转效果。