在CSS3中，实现图片旋转核心依靠transform属性的rotate方法，结合animation动画可以制作出各种动态旋转效果，无需引入额外的JavaScript库，兼容性和性能都有保障。
一、核心属性说明
1. transform属性
transform是CSS3中用于元素变形的核心属性，其中rotate()函数可以实现元素的旋转效果，参数表示旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转，单位常用deg（度）。
2. animation属性
animation用于配置动画的执行规则，需要配合@keyframes关键帧来定义动画的具体变化过程，常用属性包括动画名称、执行时长、循环次数、运动曲线等。
二、基础旋转效果实现
1. 鼠标悬停触发旋转
通过:hover伪类结合transform属性，实现鼠标放在图片上时触发旋转的效果，代码如下：
/* 基础图片样式 */
.rotate-img {
width: 200px;
height: 200px;
transition: transform 0.5s ease; /* 添加过渡效果，让旋转更平滑 */
}
/* 鼠标悬停时旋转180度 */
.rotate-img:hover {
transform: rotate(180deg);
}对应的HTML结构：
<img src="https://pcppp.com/200/200?random=2" class="rotate-img" alt="悬停旋转图片">
2. 持续自动旋转效果
使用@keyframes定义从0度到360度的完整旋转过程，再通过animation让动画无限循环执行，实现图片持续自动旋转：
/* 定义旋转关键帧 */
@keyframes autoRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用自动旋转动画的图片 */
.auto-rotate-img {
width: 200px;
height: 200px;
animation: autoRotate 3s linear infinite; /* 3秒完成一次旋转，线性运动，无限循环 */
}对应的HTML结构：
<img src="https://pcppp.com/200/200?random=3" class="auto-rotate-img" alt="自动旋转图片">
三、常见扩展场景
1. 点击按钮控制旋转
结合少量JavaScript控制类名切换，实现点击按钮开启或停止旋转的效果：
.click-rotate-img {
width: 200px;
height: 200px;
}
/* 旋转激活状态的样式 */
.click-rotate-img.rotating {
animation: autoRotate 3s linear infinite;
}
@keyframes autoRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<img src="https://pcppp.com/200/200?random=4" class="click-rotate-img" id="targetImg" alt="点击控制旋转图片">
<button onclick="toggleRotate()">切换旋转状态</button>
<script>
function toggleRotate() {
const img = document.getElementById('targetImg');
img.classList.toggle('rotating');
}
</script>2. 3D立体旋转效果
通过添加transform-style: preserve-3d属性，结合rotateX、rotateY实现立体的3D旋转效果：
@keyframes rotate3d {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.rotate-3d-img {
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate3d 5s linear infinite;
}四、注意事项
- rotate函数的角度单位除了deg，还可以使用rad（弧度）、turn（圈），1turn等于360deg
- 如果旋转元素内部有文字或子元素，不希望子元素跟随旋转，可以将旋转属性应用给父元素的伪元素或者单独包裹一层容器
- 在移动端使用时，建议添加
-webkit-前缀兼容旧版本浏览器，比如-webkit-transform: rotate(180deg)