变换：transform - CSS 教程

讲解

transform 对元素做几何变换，不影响文档流——元素被移到别处，原来的位置照样占着，周围元素无动于衷。四大函数：translate(x, y) 平移（可拆 translateX/translateY，百分比相对自身尺寸）；scale(n) 缩放（scale(1.2) 放大 1.2 倍，可两个值分别设宽高比）；rotate(deg) 旋转；skew(x, y) 斜切（较少用）。transform-origin 设置变换的基准点，默认 center，做「从左上角展开」这类效果时改成 left top。

百分比平移有个杀手级应用：绝对定位元素 left: 50%; top: 50% 只是把元素的「左上角」放到中心，再补一句 transform: translate(-50%, -50%) 把元素往左上方各拉回自身的一半，就实现了不定宽高的完美居中——这是 Flexbox 普及前的标准答案，弹窗场景至今常用。

多个变换可以空格连接：transform: translate(10px, 20px) rotate(45deg)，但顺序敏感——先旋转再平移，平移方向会跟着旋转后的坐标系走。现代 CSS 把 translate、rotate、scale 拆成了独立属性（与 transform 叠加生效，顺序固定为 translate → rotate → scale），做单项动画时不再需要拼接一长串。transform 还有 3D 一族（rotateX/rotateY/translateZ 配合父容器的 perspective 透视），卡片翻面效果靠它。前面章节提过的两个副作用再强调一次：transform 非 none 会创建层叠上下文，也会让后代 fixed 元素的参照物变成自己。

示例

/* 经典居中：不定宽高的弹窗 */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 图片悬停轻微放大（配合容器 overflow: hidden 裁边） */
.cover img {
  transition: transform 0.3s ease;
}
.cover:hover img {
  transform: scale(1.06);
}

/* 旋转基准点：从顶部展开的卷轴 */
.scroll-paper {
  transform-origin: top center;
  transform: rotateX(-80deg);
  transition: transform 0.4s ease;
}
.scroll-paper.open {
  transform: rotateX(0);
}

/* 独立变换属性（现代写法）：单项动画更清晰 */
.spinner {
  rotate: 0deg;
  transition: rotate 0.3s ease;
}
.spinner:hover {
  rotate: 180deg;
}

常见坑

给行内元素设 transform：对 span、a 等非替换行内元素无效，先改 display: inline-block。
以为 transform 会推开别人：变换只是视觉位移，不占布局空间——移走的元素可能盖住后面的内容，需要空间就配合 margin 或改用布局方案。
多函数顺序颠倒：transform: rotate(45deg) translateX(100px) 的位移沿旋转后方向走，和 translateX(100px) rotate(45deg) 结果完全不同。不符合预期时先调顺序。
scale 放大后模糊：对位图和文字放大超过原始分辨率会糊，高清屏场景预先提供 2x 图，或用 transform 前先放大再缩回的技巧。
忘记 transform 的副作用：创建层叠上下文 + 劫持 fixed 后代，弹窗失效先查祖先链有没有 transform。

小结

translate/scale/rotate/skew 四大变换不占文档流；translate(-50%, -50%) 做绝对定位居中；多函数顺序敏感；transform 性能最好但有层叠副作用。下一章用它驱动真正的动画：@keyframes。