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

.rotate-image {
  transform: rotate(45deg);
}

<img src="image.jpg" class="rotate-image" alt="旋转的图片">

这种方法适用于简单的旋转效果，但无法实现复杂的旋转动画。

技巧二：利用@keyframes动画

如果您想要创建一个旋转动画，可以使用@keyframes规则和animation属性来实现。

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

<img src="image.jpg" class="rotate-animation" alt="旋转动画的图片">

这种方法可以实现连续的旋转动画，但旋转方向是固定的。

技巧三：结合transform-origin属性

transform-origin属性可以改变旋转的中心点。通过设置不同的值，您可以实现多种旋转效果。

.rotate-center {
  transform-origin: center;
  transform: rotate(45deg);
}

.rotate-top-left {
  transform-origin: top left;
  transform: rotate(45deg);
}

技巧四：使用3D旋转效果

CSS3还支持3D变换，可以创建更加立体和动态的旋转效果。

.rotate-3d {
  transform: rotateX(45deg) rotateY(45deg);
}

这种方法可以实现真正的3D旋转效果，但可能需要更多的浏览器兼容性处理。

总结