052D 与 3D 转换

transform 让元素变形：挪、转、缩、斜，还能进 3D 空间翻跟头。它是 CSS 动效的「关节」——先学会摆姿势，下一课再让姿势动起来。

约 35 分钟 9 个动手实验动效之关节

一、transform 是什么：变形不改布局

transform 把元素「拿起来重新摆放」，但不改变文档流：其他元素完全不知道它动了，该在哪还在哪。这和 margin 位移有本质区别—— margin 是「推」，transform 是「飘」。

上面一行用 margin（红盒把兄弟 3 挤走），下面用 translate（绿盒压在 3 上）——把绿盒位移改成 0 看它回位

这个特性是双刃剑：做动效它是天赋（动画不引起布局重排，性能极好）；做布局它是坑（想让别人让位时请用 margin / 定位）。

二、2D 四将：挪、转、缩、斜

2D 变换就四个基本动作，记住「挪转缩斜」四字诀：

四种基本变形——把 .b 的 rotate 改成 -35deg 反向转、把 .c 的 scale 改成 0.5 缩小

单位别写错：rotate / skew 用角度 deg， translate 用长度 px/%，scale 是纯数字。

三、复合写法：顺序就是剧情

多个函数空格连接写在一个 transform 里，浏览器从左往右依次执行。顺序不同、结果不同——因为每一步都在上一步的结果坐标系里进行：

把 .a 的顺序也改成 translateX(52px) rotate(30deg)，两个盒子就重叠了——顺序的魔力

四、transform-origin：变形的支点

所有变形都绕着一个支点发生，默认在元素正中心。 transform-origin 可以挪动支点——旋转「看起来怪」时，九成是支点问题。

同一角度 -16deg、三个支点三种感觉——把 .a 的 left bottom 改成 center，它就和 .b 一样了

拟物动效的支点直觉：门绕门轴（left）、天窗绕顶边（top）、指针绕圆心（center）—— 想让动画「像真的」，先问自己：这东西现实里绕哪儿转？

五、scale 的妙用：hover 放大卡片

scale 最高频的用法是悬停微放大：卡片 hover 时 scale(1.06)，配合过渡就是电商列表、作品集的标配手感。这里的 transition 是下一课主角，先照抄感受一下。

悬停放大 6% + 阴影加深——把 scale(1.06) 改成 scale(1.2)，看放太大反而挡到邻居

放大必然盖住邻居（变形不改布局），所以列表场景记得给卡片留间距，或给容器 overflow: hidden 防止溢出滚动条。

六、3D 之门：perspective 视距

进入 3D 前先装一个「镜头」：perspective（视距）表示 你的眼睛离屏幕多远，写在父元素上。值越小 = 眼睛越近 = 透视越夸张（近大远小越明显）；值越大越接近「正视图」。

perspective 值的感知：近镜头 vs 远镜头
写法	含义	视觉效果
perspective: 220px	眼睛离屏幕很近	3D 感夸张，近大远小明显
perspective: 620px	日常身位	适中的立体感
perspective: 900px	眼睛离得远	含蓄，接近正视图

同一个 rotateY(45deg)，近镜头 vs 远镜头——把 .near 的 220px 改成 140px，透视更夸张

口诀：「perspective 写在爸身上」。写在元素自己身上是另一种语法（transform: perspective(600px) rotateY(45deg)），效果略有差别，入门先掌握父元素写法。

七、rotateX/Y/Z 与 preserve-3d

3D 空间有三根轴：X 横（左右）、Y 竖（上下）、Z 深浅（冲着你）。 rotateX 像翻跟头、rotateY 像翻书、rotateZ 就是平面旋转。想让子元素保持真实 3D 位置关系，给容器加 transform-style: preserve-3d。

绕三根轴旋转的同一张卡片——把 .x 的 rotateX 改成 rotateY，它就从躺倒变翻书

三块薄板沿 Z 轴堆叠——把 .p3 的 84px 改成 160px 拉得更远；把容器的 preserve-3d 改成 flat 看它压扁成平面

不加 preserve-3d，子元素的 Z 轴位移会被「压扁」回平面—— 这就是「明明写了 translateZ 却没反应」的头号原因。

八、backface-visibility：3D 翻牌实战

元素转到背面时，默认还能看见它（镜像的）。给正反两面都加 backface-visibility: hidden，背对屏幕就隐身—— 翻牌效果的灵魂就在这一行。

鼠标悬停翻牌——把 rotateY(180deg) 全换成 rotateX(180deg) 变上下翻；把 perspective 的 900px 改成 300px 感受「镜头怼脸」

翻牌六步曲口诀：「爸管镜头，卡开 3D，两面重叠，各自藏背，背面预转，hover 翻身」。记不住就回来抄这六行注释。

九、本章小结

transform 函数总表（收藏级）：

transform 常用函数总表：作用与示例
函数	作用	示例
translate(x, y)	2D 平移	`translate(20px, 10px)`
translateX / translateY	单轴平移	`translateX(20px)`
scale(x, y)	缩放（纯数字）	`scale(1.2)`
scaleX / scaleY	单轴缩放	`scaleX(1.5)`
rotate(deg)	2D 旋转（顺时针为正）	`rotate(45deg)`
skew(x, y) / skewX / skewY	斜切	`skewX(-15deg)`
rotateX / rotateY / rotateZ	绕三轴 3D 旋转	`rotateY(45deg)`
translate3d(x, y, z) / translateZ	3D 平移（z 需透视）	`translateZ(50px)`
scale3d(x, y, z)	3D 缩放	`scale3d(1, 1, 2)`
matrix(...)	矩阵（了解，工具转换用）	—

transform 不改变文档流：margin 推人、transform 叠人
复合写法从左往右执行，顺序影响结果；transform-origin 决定支点（默认中心）
perspective 写在父元素：值越小越夸张；preserve-3d 让子元素共享 3D 空间
翻牌 = 正反面重叠 + backface-visibility: hidden + 背面预转 180°
动效首选 transform / opacity（GPU 加速），这也是下一课过渡反复强调的事

动手练习：打开第八节的翻牌实验台做两个改造—— ①把 rotateY(180deg) 全部换成 rotateX(180deg)（上下翻）； ②把 perspective 从 900px 改成 300px，感受「镜头怼脸」。再给第二节四将里的 rotate 加上 transform-origin: left bottom，看看旋转围绕哪里。