想用css3让div实现旋转，关键是理解transform中的rotate写法，并结合transition或animation完成不同效果。下面从基础旋转、悬停旋转、持续旋转和常见问题四个方面说明。

css3实现div旋转最常用的属性是transform。实际操作时，可以按照“创建div、设置基础样式、写入rotate角度、刷新页面查看效果”的顺序完成。下面用同一个div类名演示基础旋转，这样更容易直接套用到项目中。

• 步骤1：先创建一个基础div，例如
  内容
  。
• 步骤2：给.box设置宽高、背景色和居中等基础样式。
• 步骤3：直接在.box上写transform: rotate(45deg); 就能让div旋转45度，改成rotate(90deg)就是旋转90度。
• 基础示例代码：HTML：
  旋转div
  ；CSS：.box { width: 120px; height: 120px; line-height: 120px; text-align: center; background: #4f86ff; color: #fff; transform: rotate(45deg); }
• 如果只做静态展示，通常不需要额外加入transition或animation。

如果希望鼠标移入时div再发生旋转，可以把默认状态和悬停状态分开设置，同时加入transition让变化更平滑。更实用的写法是先给div一个初始角度或初始不旋转状态，再在:hover中追加旋转角度，这样读者可以清楚看到触发逻辑。

• 步骤1：创建div，例如
  悬停旋转
  。
• 步骤2：在默认状态写transition，保证移入和移出都有过渡。
• 步骤3：在.hover-box:hover中写transform: rotate(180deg);，鼠标移入后即可旋转。
• 悬停示例代码：HTML：
  悬停旋转
  ；CSS：.hover-box { width: 120px; height: 120px; background: #ff7a59; transition: transform 0.4s ease; transform: rotate(0deg); } .hover-box:hover { transform: rotate(180deg); }
• 如果想默认就倾斜一点，可以把初始状态改成transform: rotate(15deg);，悬停时写成transform: rotate(45deg);。

当需求是让div持续不断旋转时，应使用animation配合关键帧来完成。完整顺序通常是“创建div、写基础样式、定义@keyframes、把animation绑定到div、刷新查看效果”。这样不仅能实现无限旋转，也方便后续控制暂停、速度和方向。

• 步骤1：创建div，例如
  。
• 步骤2：先写基础样式，再定义从0deg到360deg的关键帧。
• 步骤3：给.loading-box添加animation: spin 1.5s linear infinite;，即可实现匀速无限旋转。
• 无限旋转示例代码：HTML：
  ；CSS：.loading-box { width: 80px; height: 80px; border: 6px solid #d8e3ff; border-top-color: #2f6bff; border-radius: 50%; animation: spin 1.5s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
• 如果想停止持续旋转，可以移除animation，或切换为animation-play-state: paused;；如果只想旋转一次，可以去掉infinite并补充动画次数。

写css3旋转效果时，常见问题主要集中在旋转中心、多个变换叠加、初始状态设置和动画定义上。排查时最有效的方法不是只看概念，而是直接对照错误写法和正确写法。这样更容易定位为什么div没有旋转、旋转角度不对，或者其他位移缩放效果被覆盖。

• 问题1：div没有按预期角度旋转。常见现象是样式写了但页面看起来没变化。正确检查方式是确认是否真的写了transform: rotate(45deg);，而不是只写transition或animation名称。
• 问题2：多个transform互相覆盖。错误写法：.box { transform: rotate(45deg); } .box:hover { transform: translateX(20px); }，这样悬停后只剩位移。正确写法：.box:hover { transform: rotate(45deg) translateX(20px); }，把多个变换合并在同一组transform里。
• 问题3：旋转中心不对。错误现象是div像绕边角转。正确修复是在目标div上写transform-origin，例如transform-origin: center center; 或 transform-origin: left top;，而不是写到父元素上。
• 问题4：持续旋转不生效。常见原因是只写了animation: spin 1s linear infinite; 却没有定义@keyframes spin。正确写法必须同时存在animation声明和@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }。
• 问题5：不知道45度、90度怎么写。直接使用transform: rotate(45deg);、transform: rotate(90deg);、transform: rotate(-45deg);即可，负数表示反方向旋转。
• 问题6：悬停后旋转，移开又跳回去不顺畅。正确做法是把transition写在默认状态，例如.box { transition: transform 0.3s ease; }，不要只写在:hover里。
• 问题7：页面里长期旋转的div太多。现象通常是视觉干扰变强或移动端更吃性能。处理思路是减少同时旋转的元素数量，适当放慢动画速度，并尽量只让装饰性div旋转。

无论是固定角度展示、鼠标悬停旋转，还是循环动画，css3实现div旋转的核心都在于根据场景选择合适的transform、transition和animation组合。先按“创建div、设置基础样式、添加rotate或动画、刷新查看效果”的顺序实现，再结合常见问题逐项排查，通常就能快速写出稳定且易维护的div旋转效果。

《夸克》非常好用的免费AI浏览器

下载APP查看