使用Animate.css的rotateIn类可实现图片旋转进入效果，结合自定义@keyframes与transform: rotate()能创建持续或无限旋转动画，通过添加animation-duration、transform-origin等属性控制细节，适用于加载图标或交互反馈场景。
Animate.css 是一个轻量级的 CSS 动画库，提供了大量预定义的动画类，可以快速为元素添加动画效果。如果想用 Animate.css 实现图片旋转动画，可以直接使用内置类，也可以结合 CSS 的 transform 属性来自定义更灵活的旋转效果。
使用 Animate.css 内置类实现旋转
Animate.css 提供了 rotateIn、rotateOut 等旋转动画类，适用于淡入旋转或消失旋转的场景。
例如：让图片在页面加载时从 0 度旋转放大进入- 引入 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 的精细控制，能轻松实现各种图片旋转动画效果，既省时又灵活。
