transform: 3d旋转

### 使用 CSS Transform 实现 3D 旋转效果

为了创建一个基本的 3D 旋转变换，`transform` 属性提供了多种函数来操作元素的空间位置和方向。对于 3D 变换来说，最常用的属性包括 `rotateX()`、`rotateY()` 和 `rotateZ()` 函数。

#### 创建简单的立方体结构
首先定义 HTML 结构，构建六个面组成的立方体：

<div class="scene">
    <div class="cube">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face left">Left</div>
        <div class="face right">Right</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
    </div>
</div>

#### 设置基础样式与视角
为了让这个三维物体看起来有立体感，需要给父容器 `.scene` 添加透视效果，并设定其距离屏幕的距离（即 perspective 值），这使得最终呈现出来的图像更接近真实世界中的视觉感受[^1]。

.scene {
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;
    perspective: 800px; /* 设定观察者到投影平面之间的距离 */
}

.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

#### 配置各个面的位置关系
通过调整每个面的定位以及应用相应的 rotate 和 translate 方法，可以让这些 div 正确排列成一个完整的正方体形状[^2]。

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 69, 0, .7);
    border: 1px solid black;
}

.front { transform: translateZ(100px); }
.back  { transform: rotateY(180deg) translateZ(100px); }
.left  { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top   { transform: rotateX(90deg) translateZ(100px); }
.bottom{ transform: rotateX(-90deg) translateZ(100px);}

#### 动态控制旋转角度
最后一步是让这个立方体能够响应用户的交互动作而发生转动。这里可以通过 JavaScript 或者纯 CSS 来完成。下面是一个基于鼠标悬停事件触发自动连续自转的例子。

/* 当鼠标指针位于场景之上时启动无限循环动画 */
.scene:hover .cube {
    animation-name: spin;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes spin {
    from { transform: rotateX(0deg) rotateY(0deg); }
      to { transform: rotateX(360deg) rotateY(360deg); }
}

上述代码片段展示了如何利用 CSS 的 `transform` 属性配合其他相关特性轻松实现复杂的 3D 图形变换效果。值得注意的是，在实际开发过程中还需要考虑不同浏览器间的兼容性问题。