在网页开发中，给图片添加旋转动画可以有效提升页面的视觉吸引力，Animate.css作为轻量级的CSS动画库，提供了大量预设动画类，结合CSS的transform属性可以灵活实现各类图片旋转效果。
Animate.css基本使用
首先需要在项目中引入Animate.css库，可以通过CDN的方式直接引入，在HTML的<head>标签中添加如下代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
引入之后，只需要在需要添加动画的元素上添加对应的动画类即可触发预设动画，比如给一个<div>元素添加淡入动画，只需要添加animate__fadeIn类。
transform旋转属性说明
CSS的transform属性用于对元素进行旋转、缩放、倾斜或平移，其中旋转功能通过rotate()函数实现，参数可以是角度值，比如rotate(45deg)表示顺时针旋转45度，负值则表示逆时针旋转。
如果需要自定义旋转的角度、旋转中心、动画时长等参数，可以通过CSS自定义属性或者单独编写样式覆盖默认配置。
Animate.css类与transform结合实现图片旋转
Animate.css本身没有专门的旋转动画类，但是可以利用它的动画触发机制，结合自定义的transform旋转样式实现效果。下面是一个完整的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片旋转动画示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* 自定义旋转动画样式 */
.custom-rotate {
/* 设置旋转中心为元素中心 */
transform-origin: center center;
/* 定义旋转动画关键帧 */
animation-name: customRotate;
/* 动画时长2秒 */
animation-duration: 2s;
/* 动画无限循环 */
animation-iteration-count: infinite;
/* 动画匀速执行 */
animation-timing-function: linear;
}
/* 定义旋转关键帧 */
@keyframes customRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 图片样式 */
.rotate-img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 结合Animate.css的动画类和自定义旋转类 -->
<img src="https://picsum.photos/200/200?random=2" class="rotate-img animate__animated animate__fadeIn custom-rotate" alt="旋转图片">
</body>
</html>
上面的代码中，animate__animated是Animate.css的基础类，必须添加才能触发动画效果，animate__fadeIn是入场淡入动画，custom-rotate是自定义的旋转动画类，两者结合可以让图片先执行淡入动画，再持续执行旋转动画。
参数调整技巧
如果需要调整旋转的效果，可以修改对应的CSS属性：
- 修改
animation-duration的值可以调整旋转速度，值越小旋转越快 - 修改
rotate()函数中的角度值可以调整旋转的角度范围，比如改成rotate(180deg)可以实现半圈旋转 - 修改
transform-origin的值可以调整旋转中心，比如设置成left top可以让图片以左上角为中心旋转 - 如果需要只旋转一次，可以把
animation-iteration-count的值改成1
注意事项
使用Animate.css的时候要注意版本差异，不同版本的动画类名可能有细微区别，建议参考官方文档确认类名。另外如果自定义的transform样式和Animate.css的默认样式冲突，可以通过提高自定义样式的优先级来覆盖默认配置，比如在自定义样式选择器后面添加!important，不过尽量不要过度使用这个规则。
Animate.csstransformCSS动画图片旋转修改时间：2026-07-22 08:39:26