图片hover时歪斜偏移因transform-origin默认为左上角，应设为center并统一写transform: skew(-6deg) rotate(2deg)；需加translateZ(0)开启GPU加速，且默认态也要有transform声明。
hover 时用 transform: skew() 和 rotate() 同时生效，但图片歪了还偏移？
直接叠加 skew(10deg) 和 rotate(5deg)，图片会意外位移——因为两个变换都基于元素默认的 transform-origin（左上角），叠加后坐标系被反复扭曲。浏览器不是“先歪再转”，而是把两个矩阵乘在一起，原点没调好，视觉上就像被踢了一脚。
实操建议：
- 统一设置
transform-origin: center，让倾斜和旋转都绕中心发生 - 写在一行里：
transform: skew(-6deg) rotate(2deg)，顺序不能反（CSS 中靠前的变换先应用） - 别用
skewX()/skewY()单独调，容易漏掉另一轴的隐式影响
transition 动画卡顿、闪一下才动？
常见于只写了 transition: transform 0.3s 却没触发硬件加速，尤其在 Safari 或低端安卓机上。浏览器发现只是纯 CSS 变换，可能仍走 CPU 渲染，帧率不稳。
实操建议：
- 强制开启 GPU 加速：
transform: skew(-6deg) rotate(2deg) translateZ(0) - 过渡属性必须精确匹配：如果 hover 里是
transform，那默认态也得有transform: skew(0) rotate(0) translateZ(0)，否则首次 hover 会从“无 transform”跳到“有 transform”，触发 layout - 避免同时过渡
width或height，它们会触发重排，直接拖垮性能
图片边缘被裁掉、出现白边或锯齿？
skew 会让元素几何框不变，但内容实际溢出；rotate 则可能让像素对齐失效，尤其在非整数角度下。父容器没留余量，或者图片本身没设 display: block，都会导致底部空隙或边缘断裂。
实操建议：
- 给图片加
display: block，消灭 inline 元素默认的基线间隙 - 父容器设
overflow: hidden比较安全，但更推荐用padding预留 10–15px 余量，比裁剪更可控 - 抗锯齿可加
image-rendering: -webkit-optimize-contrast（Safari）或will-change: transform（慎用，仅对频繁动画的元素）
IE 或老版 Edge 根本不转？
IE10+ 支持 transform，但不支持 skew() 单独写法（需要 -ms-transform: skew(…)），而且 IE 对多个变换函数连写的支持极差，空格、括号稍错就整个失效。
实操建议：
- 放弃 IE 兼容：现代项目直接不加
-ms-前缀，IE11 已停止支持 - 如果真要保，用 Autoprefixer 编译，别手写前缀；且必须把
skew和rotate拆成两个独立声明（IE 不认连写） - 测试时打开开发者工具，在 Elements 面板里手动删掉一个变换，看是否恢复——这是快速定位是哪个函数被忽略的最有效方法
最麻烦的其实是 origin 和 padding 的配合：动效看着顺，往往是因为 padding 刚好吃掉了 skew 导致的溢出；换一张图、换个字号，就又露馅。别信“一次写完永久可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
