应优先使用 rotate() 实现平滑倾斜过渡，避免 skew() 破坏交互与语义；需配合 transition: transform、合理设置 transform-origin 和 overflow 处理，并在打印时重置 transform。
直接用 transform 配合 transition 就能做出平滑倾斜过渡，但必须避开 skew() 直接作用在可交互元素上的坑——它会错位点击区域、拉伸字体、破坏语义。
用 transform: rotate() 做装饰性微倾 + 过渡
适合按钮、卡片标题、图片角标这类“看起来斜一点”的场景，视觉自然且不影响交互。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
rotate()不改变元素宽高和布局流，skew()会挤压字形、错位边框 - 必须加
transition: transform 0.3s ease，不能写transition: all，否则可能触发重排 - 起始态建议设
transform: rotate(-2deg)，悬停时回正rotate(0)或反向rotate(2deg) - 小角度（±2°~±6°）最安全；超过 ±10° 在移动端易被误判为可拖拽
示例：
button {
transform: rotate(-3deg);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button:hover {
transform: rotate(0);
}
用嵌套 skewX() 补偿实现“纯文字倾斜”
当设计稿明确要求按钮文字带斜切感（比如复古海报风），又不能让点击热区歪掉，就得用两层结构反向抵消。
- 外层容器（如
<span></span>）设transform: skewX(-12deg)和overflow: hidden - 内层文字（如
<span></span>或<em></em>）设transform: skewX(12deg)和position: relative微调垂直对齐 - 别给
button自身加skew——它的背景、边框、焦点框全会跟着歪，且屏幕阅读器定位失效 - 若需支持旧安卓 WebView，补上
-webkit-transform: skew(-12deg, 0)
表格或图片整体倾斜时的 overflow 和 origin 控制
对 <table> 或 <code><img alt="HTML怎么做出倾斜过渡效果" > 直接 rotate() 很简单，但边缘裁剪和旋转中心容易出问题。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: block（尤其<table>），否则 Safari 可能不触发变换 <li> <code>transform-origin: center是底线，否则默认从左上角转，一倾斜就飞出视口 - 父容器若有
overflow: hidden，倾斜后四角会溢出被裁——要么加大父容器 padding，要么用clip-path: inset(0)替代 - 图片悬停倾斜常配
scale()，但注意transform: scale(1.1) rotate(4deg)要写在一起，分开写会被后者覆盖
真正难的不是怎么写那几行 transform，而是判断该用 rotate 还是 skew、要不要加 preserve-3d、以及打印时是否忘了重置 @media print { transform: none }——这些地方一漏，上线后用户截屏或打印就会发现全是歪的。
