引言

绝招一：使用CSS3的transform属性

CSS3的transform属性可以轻松实现元素的2D和3D变换，其中包括旋转效果。以下是一个简单的例子：

img {
  width: 200px;
  height: 200px;
  transition: transform 0.5s ease;
}

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

绝招二：利用rotate函数

rotate函数可以更精确地控制旋转的角度。以下是一个使用rotate函数的例子：

img {
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
}

绝招三：结合transform-origin属性

transform-origin属性可以改变变换元素的原点位置，从而实现不同的旋转效果。以下是一个使用transform-origin属性的例子：

img {
  width: 200px;
  height: 200px;
  transform: rotate(90deg) translate(50px);
  transform-origin: 0% 0%;
}

绝招四：利用CSS动画实现动态旋转

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

img {
  width: 200px;
  height: 200px;
  animation: rotate 2s linear infinite;
}

绝招五：结合JavaScript实现更复杂的旋转效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Rotate Image</title>
<style>
  img {
    width: 200px;
    height: 200px;
    transition: transform 0.5s ease;
  }
</style>
</head>
<body>
<img id="my-image" src="image.jpg" alt="Rotate Image">
<script>
  var img = document.getElementById('my-image');
  img.addEventListener('mouseover', function() {
    img.style.transform = 'rotate(360deg)';
  });
  img.addEventListener('mouseout', function() {
    img.style.transform = '';
  });
</script>
</body>
</html>

总结