transform 2D 变形
transform 让元素在不影响周围布局的情况下变形：translate 平移、scale 缩放、rotate 旋转、skew 倾斜。它不像 margin/top 那样触发重排，而是在合成层处理，是性能最好的位移方式。
2D 变形通过 transform-origin 设置旋转中心点；多个变形函数可以连写：translate(20px,10px) rotate(45deg) scale(1.2)，按从左到右顺序生效。
- translate(x,y) 平移：替代 position/top-left 做位移动画
- scale(n) 缩放：scale(1.1) 放大 10%，配合悬停做“放大反馈”
- rotate(deg) 旋转：transform-origin 可改旋转中心
- skew(deg) 倾斜：常做立体折叠卡片效果
HTML
<style> .box { display:flex; gap:24px; justify-content:center; padding:40px 0; } .t { width:90px; height:90px; border-radius:12px; background:#4a9eff; transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .t:hover { transform: translate(12px,-12px) rotate(15deg) scale(1.15); } .t2 { background:#f778ba; } .t2:hover { transform: skew(-12deg) scale(1.1); } .t3 { background:#57ab5a; } .t3:hover { transform: rotate(180deg); } </style> <div class="box"><div class="t"></div><div class="t t2"></div><div class="t t3"></div></div>
本节要点transform 是性能最好的变形方式（合成层不重排）；多个函数连写按顺序生效。
