transform: rotate() 配合 position: absolute 易错位，因旋转不改变布局占位框，top/right 仍按原始矩形计算；需配合 transform-origin 和 translate 微调才能精准贴角。
为什么 transform: rotate() 配合 position: absolute 容易错位
直接给角标加 rotate() 后，元素视觉上斜了，但它的布局占位框（bounding box）没变——浏览器仍按原始矩形计算 top/right 偏移，导致定位点偏移、文字被裁或悬空。这不是旋转失效，是坐标系没对齐。
- 旋转前先用
transform-origin明确旋转中心，比如transform-origin: top right让右上角钉死不动 -
position: absolute的偏移值（如top: 8px; right: 8px）应基于未旋转时的容器角点，而非旋转后的视觉边缘 - 避免同时用
margin和transform调位置——margin影响布局流，transform只影响渲染，混用极易失控
如何让斜角标真正“贴在右上角不飘”
关键不是调 top/right，而是用 transform 把旋转后溢出的部分“拉回”视觉角落。常见做法是：先绝对定位到右上角，再旋转，最后用负平移微调。
- 容器（图片父元素）设
position: relative - 角标元素设
position: absolute; top: 0; right: 0;，此时它左上角顶在容器右上角点 - 加
transform: rotate(-45deg) translateX(-50%) translateY(-50%);—— 先转再向左上各拉一半自身宽高，把旋转中心对准原角点 - 更稳妥写法：
transform: rotate(-45deg) translate(50%, -50%); transform-origin: top right;，明确锚点后，translate方向更可预测
rotate() 角度选 -45deg 还是 45deg？会影响文字可读性
负角度（-45deg）让文字顺时针倾斜，符合国内价格标签常用样式（如“特价”从左上往右下斜）；正角度则反向。但实际效果还取决于 transform-origin 和字体本身：
- 中文无基线倾斜，-45deg 下文字底部会比顶部更靠近图片边缘，容易被裁——建议加
padding或用line-height控制高度 - 若用背景色块包文字，块的
width和height是旋转前尺寸，视觉宽度 ≈原宽 × cos(45°)，别按视觉估算留白 - 移动端需注意：
rotate()在某些旧 Android WebView 中触发硬件加速异常，可加will-change: transform;提前提示
兼容性与性能提醒：别在 :hover 里只靠 rotate 做动效
纯 transform: rotate() 动画本身性能好，但若配合 top/right 动态变化，会触发 layout → paint → composite 全流程，卡顿明显。
- 动画只用
transform和opacity，例如：transition: transform 0.2s ease, opacity 0.2s; - IE11 不支持
transform-origin在absolute元素上的百分比值，用像素值替代，如transform-origin: 100% 0改为transform-origin: 200px 0（需预知容器宽） - 如果角标需响应式缩放，别用
vw设字体大小后旋转——缩放和旋转叠加会导致模糊，改用scale()替代font-size
transform-origin 的显式声明，以及旋转后未用 translate 补偿位移。这两个点一错，角标就“看起来在动，其实没贴住”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
