使用Animate.css的rotateIn类可实现图片旋转进入效果，结合自定义@keyframes与transform: rotate()能创建持续或无限旋转动画，通过添加animation-duration、transform-origin等属性控制细节，适用于加载图标或交互反馈场景。

Animate.css 是一个轻量级的 CSS 动画库，提供了大量预定义的动画类，可以快速为元素添加动画效果。如果想用 Animate.css 实现图片旋转动画，可以直接使用内置类，也可以结合 CSS 的 transform 属性来自定义更灵活的旋转效果。

使用 Animate.css 内置类实现旋转

Animate.css 提供了 rotateIn、rotateOut 等旋转动画类，适用于淡入旋转或消失旋转的场景。

• 引入 Animate.css 文件（通过 CDN 或本地）
• 给 img 标签添加 animate__animated animate__rotateIn 类
• 可设置动画持续时间或延迟

示例代码：

@@##@@

自定义旋转：Animate.css 类与 transform 结合

如果需要持续旋转（如加载图标）、特定角度旋转或无限循环，可以将 Animate.css 的触发机制与自定义 @keyframes 和 transform: rotate() 结合使用。

• 保留 Animate.css 的进入/离开动画结构
• 添加自定义 CSS 定义新的旋转 keyframes
• 通过类控制 transform 的旋转行为

示例：创建无限旋转动画

@@##@@

也可以在鼠标悬停时结合 Animate.css 的触发类和 transform：

@@##@@

常见技巧与注意事项

• Animate.css 默认只执行一次动画，若需重复可加 animate__repeat-2 或自定义 animation-iteration-count
• 使用 transform-origin 可调整旋转中心点，比如绕图片左上角转：transform-origin: top left;
• 移动端注意性能，避免多个高频率旋转同时运行
• 确保图片容器有足够空间，防止旋转时被裁剪

基本上就这些。通过组合 Animate.css 的便捷类和 transform 的精细控制，能轻松实现各种图片旋转动画效果，既省时又灵活。