第八章 · 8.1 节

transform 详解

transform 允许对元素进行平移、缩放、旋转、倾斜，且这些变化不会影响文档流——周围元素不会因为一个元素被旋转或缩放而重新排布，这也是它区别于 width/margin 等布局属性的关键特性。

2D 变换函数

函数	作用	示例
translate()	位移	translate(20px, -10px)
scale()	缩放，1 为原始大小	scale(1.1)
rotate()	旋转	rotate(15deg)
skew()	倾斜	skew(10deg, 0)

悬停查看效果（若为静态截图请脑补：鼠标悬停时卡片上浮并轻微放大）

translateY

rotate

scale

.btn { transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px); }

transform-origin：变换基准点

所有变换都围绕一个"基准点"进行，默认是元素中心 50% 50%。修改基准点能显著改变旋转、缩放的观感——比如把基准点移到左上角，旋转就会表现为"以左上角为轴心甩开"，而不是原地打转。

.flip-card {
  transform-origin: left center;
  transform: rotateY(20deg);
}

组合多个变换

多个变换函数写在同一个 transform 声明里，用空格分隔，从左到右依次生效——调换顺序会得到不同结果，这是初学者最容易踩的坑。

/* 先平移再旋转：整体绕新位置旋转 */
.a { transform: translate(40px, 0) rotate(45deg); }

/* 先旋转再平移：平移方向也跟着旋转了 */
.b { transform: rotate(45deg) translate(40px, 0); }

心智模型把每个变换函数想象成对"坐标系本身"的操作而非对元素的操作：先执行的函数会重新定义后续函数所处的坐标系，因此顺序调换后结果不同。

3D 变换初步

在父元素上开启 perspective，子元素才能表现出真正的透视深度效果，否则 rotateX / rotateY 只会呈现为扁平的拉伸。

.scene { perspective: 800px; }
.card {
  transform: rotateY(25deg);
  transform-style: preserve-3d;
}

transform-style: preserve-3d 让子元素的 3D 变换保留在同一个三维空间中，而不是被父元素"拍扁"，这是制作立体翻转卡片一类效果的关键声明。

为什么 transform 性能更好

修改 width、top 这类布局属性会触发浏览器重新计算页面布局（reflow），代价较高；而 transform 与 opacity 通常可以直接交由 GPU 合成层处理，跳过布局与绘制阶段。这也是为什么几乎所有动效场景都建议优先用 transform: translate() 代替 left/top 位移元素。