深入理解 CSS Transform：从平面到空间的魔法
CSS Transform（变换） 是现代网页动效的基石。它允许我们对元素进行旋转、缩放、倾斜和位移，而不会影响页面的正常文档流（Layout）。这意味着变换是在合成层完成的，性能极高。
1. 2D 与 3D 变换的区别
-
2D 变换：
在 X 轴和 Y 轴构成的平面上操作。最常用的是
translate（位移）和rotate（旋转）。 -
3D 变换：
引入了 Z 轴（深度）。通过
perspective（透视）属性，我们可以创造出真实的近大远小效果。
2. 解决的具体问题：交互与性能
场景一：居中定位。
传统的
margin: auto
或百分比定位有时难以完美。使用
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
是实现全兼容完美居中的金标准。
场景二：高性能动画。
改变
width
或
top
会触发浏览器重排（Reflow），而改变
transform
仅触发重绘（Repaint）或合成，能保证动画在移动端也能达到 60FPS。
场景三：复杂的 3D 翻转。
比如卡片翻转效果。通过设置
backface-visibility: hidden;
和
rotateY(180deg)
，你可以轻松构建出极具质感的 UI 交互。
3. 变换原点（Transform Origin）的重要性
默认情况下，变换是围绕元素的中心点（50% 50%）进行的。改变
transform-origin
可以彻底改变变换的效果。例如，将原点设为左上角（0%
0%），旋转时元素会像挂在钉子上一样摆动，而不是原地自转。