在HTML页面中实现图片旋转效果，核心是通过CSS的transform属性控制元素的旋转角度，结合animation属性可以制作出动态循环旋转的效果，不需要依赖额外的JavaScript代码就能完成基础需求。
一、静态图片旋转的实现方法
如果只是需要让图片固定旋转某个角度，不需要动画效果，直接使用CSS的transform: rotate()属性即可，该属性接受角度值作为参数，单位可以是deg（度）、rad（弧度）等，最常用的是deg。
1. 基础实现步骤
首先在HTML中插入图片元素，给图片添加一个自定义的类名，方便后续编写CSS样式：
<img src="test.jpg" class="rotate-img" alt="旋转的图片">
然后在CSS中给该类名设置旋转样式，rotate(45deg)表示将图片顺时针旋转45度，负值则表示逆时针旋转：
.rotate-img {
/* 顺时针旋转45度 */
transform: rotate(45deg);
/* 可选：设置旋转的中心点，默认是元素中心 */
transform-origin: center center;
}
2. 调整旋转中心点
默认的旋转中心是图片的正中心，如果需要调整旋转中心，可以使用transform-origin属性，支持设置水平方向和垂直方向的位置，取值可以是像素、百分比或者方位词：
- left top：左上角为中心旋转
- 100px 50%：水平方向距离左侧100像素，垂直方向50%位置为中心
示例代码如下：
.rotate-img {
transform: rotate(30deg);
/* 以图片左上角为旋转中心 */
transform-origin: left top;
}
二、图片旋转动画的实现方法
如果需要让图片持续旋转，形成动画效果，需要结合CSS的animation属性，先定义一个旋转的关键帧动画，再将动画绑定到图片元素上。
1. 定义旋转关键帧
使用@keyframes规则定义动画的关键帧，从0%到100%的过程中，让元素的旋转角度从0度变化到360度，就能形成完整的一圈旋转：
/* 定义名为rotate-animation的旋转动画 */
@keyframes rotate-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
2. 绑定动画到图片元素
在图片的CSS样式中，使用animation属性调用定义好的关键帧动画，设置动画的持续时间、播放次数等参数：
.rotate-img {
/* 调用动画：动画名称 持续时间 速度曲线 延迟时间 播放次数 方向 */
animation: rotate-animation 2s linear 0s infinite normal;
}
这里的参数含义分别是：
- rotate-animation：之前定义的动画名称
- 2s：动画完成一次循环需要2秒
- linear：动画速度匀速，没有加速减速过程
- 0s：动画延迟0秒执行
- infinite：动画无限循环播放
- normal：动画正向播放，从0%到100%
3. 完整示例代码
下面是一个完整的可运行示例，页面加载后会看到图片持续匀速旋转：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片旋转动画示例</title>
<style>
@keyframes rotate-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate-img {
width: 200px;
height: 200px;
/* 绑定旋转动画 */
animation: rotate-animation 3s linear infinite;
/* 设置旋转中心为图片中心 */
transform-origin: center center;
}
</style>
</head>
<body>
<img src="https://ipipp.com/logo.png" class="rotate-img" alt="旋转的图片">
</body>
</html>
三、常见问题说明
1. 旋转后图片布局偏移怎么办
transform旋转不会改变元素本身的文档流占位，但是可能会导致元素视觉上超出原有容器，可以给父容器设置合适的宽高，或者添加overflow: hidden属性隐藏超出部分。
2. 如何让动画暂停和继续
可以通过CSS的animation-play-state属性控制动画状态，running表示播放，paused表示暂停，结合伪类或者简单的JS就可以实现交互控制：
/* 鼠标悬停时暂停旋转 */
.rotate-img:hover {
animation-play-state: paused;
}
3. 兼容旧版本浏览器
如果需要兼容旧版本的webkit内核浏览器，可以给transform和animation相关属性添加前缀：
.rotate-img {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: rotate-animation 2s linear infinite;
animation: rotate-animation 2s linear infinite;
}
HTML图片旋转CSS_animationtransform前端动画修改时间：2026-06-23 06:06:40