skew() 是错切而非旋转，会拉斜整个元素及子元素，破坏可读性与无障碍；正确用法需包裹容器、慎用方向参数，并优先考虑 font-style: italic 或伪元素替代方案。
skew() 会让元素变形，不是旋转
很多人用 skew() 是想“让文字斜着显示”，结果发现整个盒子连带背景、边框、子元素一起被拉斜了，看起来像被压扁的梯形——这不是倾斜，是错切。它改变的是坐标系的轴向，不是绕中心转，所以子元素也会跟着歪，而且不支持 transform-origin 精确控制支点（虽可设，但效果反直觉）。
常见错误现象：skewX(10deg) 后文字模糊、阴影错位、点击区域和视觉位置对不上。
- 如果只要文字斜体，用
font-style: italic更轻量、语义正确 - 如果要做“标签角标”那种斜切效果，得额外包一层容器，把
skew()和反向skew()拆开应用 -
skew()的参数单位只能是deg或无单位数值（tan 值），别混用rad或turn
skewX() 和 skewY() 的参数方向容易搞反
skewX(10deg) 是让垂直线往右偏，看着像“右上倾斜”；skewY(10deg) 是让水平线往下偏，看着像“左下倾斜”。这个方向和日常说的“向右倾斜”相反，因为它是基于坐标轴拉伸，不是基于元素自身朝向。
使用场景：做斜切导航栏底边、模拟手写风卡片边缘、CSS 动画中的形变过渡。
- 正数
skewX→ 元素右侧被拉高（左低右高） - 负数
skewY→ 元素底部被拉左（上宽下窄） - 同时用
skewX和skewY时，顺序影响最终形态（CSS transform 是从右往左执行）
skew 会破坏文本可读性与无障碍访问
浏览器不会为 skew() 后的文字重新计算字形轮廓，尤其是小字号或非等宽字体，容易出现锯齿、字符粘连。更关键的是，屏幕阅读器仍按原始 DOM 结构朗读，但视觉上内容已严重偏移，导致信息错位。
性能影响：虽然 skew() 本身是 GPU 加速的，但如果父容器有 overflow: hidden，且子元素 skew 后超出边界，可能触发重绘抖动。
- 避免在
body或大范围列表项上批量使用skew() - 如需兼容打印样式，记得在
@media print中重置transform: none - 测试时打开 Windows 高对比模式或 macOS VoiceOver，确认文字仍能准确定位
替代方案比硬套 skew() 更可靠
真要实现“视觉倾斜但布局不变”，最稳的方式不是靠 skew()，而是用伪元素 + rotate() 或 SVG 覆盖。比如斜角标签，用 ::before 画一个旋转 45deg 的矩形，再遮住多余部分，既不影响主内容流，又不会拉歪子元素。
另一个常被忽略的点：skew() 不支持 transition 动画的平滑插值（尤其在 Chrome 旧版本中会跳变），而 rotate() 就很稳。
- 不要对
input、button这类表单控件用skew()，焦点框和光标位置会错乱 - 移动端 Safari 对
skewZ()完全不支持，别写（也没必要） - 如果必须用，加
transform: skewX(-10deg) translateZ(0)强制 GPU 加速，减少模糊
skew()，而是判断它是不是当前问题的正确解法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
