transform 属性让你能够移动、缩放、旋转和倾斜一个元素——从视觉上——而不会影响文档流（其他元素不会移动）。它是 GPU 加速的，使其非常适合动画。
css
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
多个函数按顺序应用；改变顺序会改变结果（先旋转再平移与先平移再旋转不同）。
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
与改变 width/margin 不同，transform 只会影响元素的绘制外观，而不会影响它在文档流中的盒子——所以周围元素保持不动，没有重排。这正是 transform 平滑的原因。
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
translate(-50%, -50%) 居中技巧无处不在——它将元素向后移动其自身宽高的一半。
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
因为 transform 跳过了布局和绘制阶段（只进行合成），对它们进行动画处理可以保持 60fps——比动画处理 position/size 便宜得多。
Transform 是 CSS 动画和微交互的主力（悬停提升、模态框、轮播图、加载动画）。
它们在不触发布局的情况下移动/缩放/旋转，所以既强大又高效——是在网络上进行运动动画的推荐方式。