揭秘CSS旋转图片的5大绝技，轻松实现360度完美旋转，解锁图片动画新境界！

绝技一：使用transform: rotate()属性

语法示例：

/* 旋转图片90度 */
.img-rotate {
  transform: rotate(90deg);
}

HTML示例：

<img src="image.jpg" class="img-rotate">

绝技二：结合transition属性实现平滑旋转

使用transition属性可以使旋转过程更加平滑，给用户带来流畅的视觉体验。

语法示例：

.img-rotate {
  transition: transform 0.5s ease;
}

.img-rotate:hover {
  transform: rotate(360deg);
}

HTML示例：

<img src="image.jpg" class="img-rotate">

绝技三：利用animation属性实现循环旋转

语法示例：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.img-rotate {
  animation: rotate 2s linear infinite;
}

HTML示例：

<img src="image.jpg" class="img-rotate">

绝技四：使用transform: rotate3d()属性实现空间旋转

语法示例：

.img-rotate {
  transform: rotate3d(1, 1, 0, 90deg);
}

HTML示例：

<img src="image.jpg" class="img-rotate">

绝技五：结合will-change属性提升性能

will-change属性可以告诉浏览器该元素将要发生变化，从而提升性能。

语法示例：

.img-rotate {
  will-change: transform;
}

HTML示例：

<img src="image.jpg" class="img-rotate">