transform
定义CSS 变换属性，对元素做旋转、缩放、倾斜、位移而不影响文档流
transform 在元素渲染阶段做几何变换，不触发重排，是性能最好的动画属性之一。函数可叠加：transform: translateX(10px) rotate(15deg) scale(1.1)，从右向左依次应用。
2D 有 translate / rotate / scale / skew / matrix，3D 增加 translate3d / rotate3d / perspective，配合 transform-style: preserve-3d 和父级 perspective 可构建真三维空间。
- transform-origin 改变变换原点，做「绕中心转」vs「绕角落转」；
- translate(%) 的基准是元素自身尺寸，适合居中；
- backface-visibility 控制翻转卡片背面是否可见。
CSS
.card { transition: transform .3s ease; transform-origin: center; } .card:hover { transform: translateY(-6px) scale(1.03); } /* 3D 翻转 */ .flip { transform-style: preserve-3d; transition: transform .6s; } .flip:hover { transform: rotateY(180deg); }
⚠ 常见误区
- transform 动画走合成层，不碰重排，性能最好
- rotate 与 translate 同时用时注意顺序影响结果
- perspective 要写在 3D 变换的父容器上才生效