3D 变换
3D Transform
中级通用3D 变换（3D Transform）是用 CSS 的 transform 让元素在三维空间里旋转和前后移动，比如 rotateX、rotateY、translateZ。几个平面元素各自转到合适的朝向、推到合适的位置，就能拼出立方体、翻转卡片这样的立体效果，不需要任何 3D 引擎。
你可能会说：「能不能只用 CSS 做一个可以拖着转的立方体？六个面要怎么摆上去？」
读之前建议先了解
动手看看拖着转的 CSS 立方体
要点3D 变换是怎样起作用的？
- 1
三根轴，三种动作
屏幕横向是 X 轴、纵向是 Y 轴，从屏幕指向你的是 Z 轴。rotateX 让元素像翻日历一样上下翻，rotateY 像开门一样左右转，translateZ 让元素往你这边靠近或往屏幕里退。立方体的每个面都是同一个正方形，先用 rotate 转到朝向（前、右、后、左、上、下），再用 translateZ 往外推半个边长，六个面就围成了一个盒子。
- 2
顺序不同，结果不同
transform 里写的多个变换会依次作用在元素自己的坐标系上，所以顺序很重要。「先转再推」是转身后往自己的正前方走，六个面会分散到六个方向；「先推再转」是先往前走再原地转身，六个面都挤在同一个位置。写 3D 效果时位置不对，第一件事就是检查变换的顺序。
- 3
父元素要 preserve-3d
默认情况下，子元素的 3D 效果会被压平到父元素的平面里。要让六个面在同一个 3D 空间里各待各的位置，装着它们的容器必须写 transform-style: preserve-3d，再在更外层加 perspective 给出透视。拖动旋转时改的是这个容器的 transform，六个面跟着一起转。
容易混淆的地方
3D 变换只改变元素「看起来」的位置和朝向，不会影响页面布局，旁边的元素不会因此被挤开。它和透视是一对：变换决定东西怎么摆，透视决定怎么看。它也不是真正的 3D 渲染：CSS 只能摆放平面元素，没有光照、阴影计算和复杂模型，那些要用 WebGL。
什么时候用
适合用
- 做会员卡、单词卡的正反面翻转效果。
- 产品官网用一个慢慢旋转的立方体展示产品的几个特点，每面一个。
- 相册或作品集做出 3D 轮播，图片围成一圈转动。
不适合用
- 只是想把元素挪个位置或者让它挤开旁边的内容时，别用 3D 变换；用布局（flex、grid、margin）。
- 需要展示真实的产品 3D 模型、带光照材质时，CSS 拼不出来；用 Three.js 加载模型。
- 表格、表单这类要认真阅读和填写的内容，别做成 3D 旋转；文字一斜就难读了。
练一练选一个答案，看看解释
你用 CSS 做立方体，六个面都写了 translateZ(50px) rotateY(…)，结果六个面全挤在一起。该怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请用纯 CSS 3D 变换实现【需要立体效果的组件，如：官网首屏展示四个卖点的旋转立方体】。先阅读页面现有结构和样式写法，确认不需要引入新依赖。要求：外层容器设 perspective（800~1200px），立方体容器设 transform-style: preserve-3d，每个面按「先 rotate 定朝向，再 translateZ 推出半个边长」的顺序摆放；旋转通过修改立方体容器的 transform 实现，支持鼠标和触屏拖动。面上的文字要保持清晰可读；开启减少动效时停止自动旋转。不改无关代码。最后说明怎样验证：拖动时六个面始终组成完整的立方体，手机上也能正常拖动。