CSS 3D 立方体：translate 和 rotate 的顺序不能错

一、CSS 3D 的核心是 transform

CSS 3D 不需要 WebGL，不需要 Three.js。浏览器自带的 transform 属性就能实现 3D 效果，并且通过 GPU 硬件加速。

关键在于理解：transform 函数从右往左执行。

二、六个面的构建逻辑

构建一个立方体需要 6 个面。每个面起始位置都在中心，然后通过两步定位到最终位置：

css 复制代码

/* 前面：沿 Z 轴向前平移 */
.front  { transform: translateZ(100px); }

/* 后面：先向后平移，再旋转 180 度 */
.back   { transform: rotateY(180deg) translateZ(100px); }

/* 右面：先向右平移，再旋转 90 度 */
.right  { transform: rotateY(90deg) translateZ(100px); }

/* 左面 */
.left   { transform: rotateY(-90deg) translateZ(100px); }

/* 顶面 */
.top    { transform: rotateX(90deg) translateZ(100px); }

/* 底面 */
.bottom { transform: rotateX(-90deg) translateZ(100px); }

注意 .back 是 先旋转再平移 。因为 rotateY(180deg) 把 Z 轴方向反转了，translateZ(100px) 实际上是向"原来的后面"移动。如果写成 translateZ(100px) rotateY(180deg)，效果完全不同。

三、两个关键的父容器属性

css 复制代码

.scene {
    perspective: 800px;            /* 视距，决定 3D 效果的强弱 */
}
.cube {
    transform-style: preserve-3d;  /* 让子元素进入 3D 空间 */
    animation: spin 8s linear infinite;
}

perspective 定义了观察者距离屏幕的距离。值越小 3D 效果越夸张，值越大效果越平。

transform-style: preserve-3d 是关键------没有它，子元素的 3D 变换会被"拍扁"到父容器的平面上。

四、动画

css 复制代码

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

一个 @keyframes 加上 animation 属性就能让立方体匀速旋转，完整 150 行左右的 CSS 代码即可完成。

五、总结

CSS 3D 的核心是 transform，浏览器自动使用 GPU 加速
transform 从右往左执行------先旋转后平移是错误顺序的根源
perspective 控制 3D 效果的强弱
preserve-3d 让子元素进入 3D 空间