要实现CSS过渡元素的旋转，需使用transform配合transition。首先通过transform: rotate()定义旋转角度，如rotate(45deg)表示顺时针旋转45度，并结合transition设置动画时长与缓动效果；其次可调整transform-origin改变旋转中心点，默认为元素中心，也可设为top left等位置；支持多重变换如rotate和scale组合，注意顺序影响结果；持续动画可用@keyframes配合animation实现循环旋转；最后注意父容器溢出处理、元素显示类型及移动端性能优化，如添加will-change: transform提升渲染效率。
要实现CSS过渡元素的旋转（rotate），主要依靠transform属性配合transition来完成平滑动画效果。下面介绍具体实现方法和常用技巧。
1. 基础语法：使用 transform 和 transition
通过设置transform: rotate()定义旋转角度，再用transition控制变化过程的时长与缓动效果。
- rotate(45deg)：顺时针旋转45度
- rotate(-90deg)：逆时针旋转90度
- rotate(1turn)：旋转一整圈（360度）
示例代码：
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.5s ease;
}
<p>.box:hover {
transform: rotate(45deg);
}</p>当鼠标悬停时，元素会以0.5秒的动画顺时针旋转45度。
立即学习“前端免费学习笔记（深入）”；
2. 设置旋转中心点（transform-origin）
默认旋转中心是元素的中心（50% 50%），可通过transform-origin修改。
- transform-origin: top left;：以左上角为轴心旋转
- transform-origin: center bottom;：以下边缘中心为轴心
- transform-origin: 20% 20%;：自定义坐标位置
应用场景举例：制作指针或扇形菜单时，需调整旋转原点。
.arrow {
width: 40px;
height: 4px;
background: red;
transform-origin: 0 2px; /* 左端为中心 */
transition: transform 0.3s;
}
<p>.arrow:hover {
transform: rotate(90deg);
}</p>3. 多重变换与连续动画
可以同时应用多个transform操作，比如旋转加缩放。
.card:hover {
transform: rotate(180deg) scale(1.1);
}
注意：变换顺序会影响最终效果，先旋转后缩放，和先缩放后旋转结果不同。
若需要持续动画（如加载图标），可结合@keyframes使用：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<p>.loader {
animation: spin 1s linear infinite;
}</p>4. 注意事项与兼容性
CSS旋转在现代浏览器中支持良好，但仍建议：
- 确保父容器不裁剪溢出内容（检查
overflow: hidden） - 对行内元素使用前先设为
inline-block或block - 移动端注意硬件加速：可添加
will-change: transform;提升性能
基本上就这些。掌握transform: rotate()配合transition或animation，就能轻松实现各种旋转交互效果。关键在于理解旋转原点和动画时机的控制。
