rotate()必须带单位（如45deg），不接受纯数字；默认绕元素中心旋转，可通过transform-origin修改原点；transition须作用于transform属性而非rotate，且初始态建议显式声明rotate(0deg)。
rotate() 的基本写法和单位问题
直接写 transform: rotate(45) 会失效——CSS 的 rotate() 必须带单位，不接受纯数字。合法写法只有三种：deg（度）、rad（弧度）、turn（圈数）。最常用的是 deg，比如 rotate(45deg)、rotate(-90deg)。
常见错误现象：元素没动，控制台也没报错，其实是单位漏了；或者误写成 rotate(0.25) 以为是四分之一圈，但没加 turn，结果转了 0.25 度，几乎看不出来。
旋转中心点默认是元素中心，怎么改？
transform 自身不控制旋转原点，得靠 transform-origin 配合。默认值是 50% 50%（即水平居中、垂直居中），也就是元素盒模型的中心点。
想绕左上角转？写 transform-origin: 0 0；绕右下角？写 transform-origin: 100% 100%；绕某个像素点？比如 transform-origin: 20px 30px。
立即学习“前端免费学习笔记（深入）”；
注意：transform-origin 的两个值顺序是「水平方向 在前、垂直方向 在后」，和 background-position 一致，别写反成 30px 20px 导致错位。
rotate 和 transition 搭配时的坑
给 rotate 加过渡动画很常见，但容易忽略两点：
- 必须对
transform属性本身设transition，不是对rotate单独设（CSS 里没有rotate这个可过渡属性） - 初始状态最好显式写出
transform: rotate(0deg)，否则从无transform到有rotate(45deg)，部分浏览器可能跳变或不触发过渡
正确写法示例：
button {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
button:hover {
transform: rotate(30deg);
}
rotate 在 flex 或 grid 容器里的行为异常？
当父容器是 display: flex 或 display: grid 时，子元素即使设置了 transform: rotate()，视觉上可能“被拉直”或旋转失效——这通常不是 rotate 的问题，而是父容器的 align-items 或 justify-content 触发了基线对齐或尺寸重算，掩盖了旋转效果。
排查建议：
- 临时给旋转元素加
border: 1px solid red，确认是否真没转，还是被裁切/覆盖了 - 检查父容器有没有
overflow: hidden，旋转后超出部分会被剪掉 - 在 flex 容器中，确保没意外设置
align-items: stretch并配合了固定高度，导致旋转后内容被挤压变形
真正难调的，往往是旋转后和其他定位、z-index、will-change 共同作用下的层叠顺序问题，这时候光看 rotate 是不够的。
