揭秘CSS旋转图片的五大技巧：轻松实现360°旋转，让你的网页动起来！

技巧一：使用CSS3的transform属性旋转图片

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

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

技巧二：利用animation属性创建旋转动画

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

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

技巧三：使用transform-origin调整旋转中心

默认情况下，transform属性会以元素的中心为旋转中心。但有时候，我们可能需要改变旋转中心。这时，transform-origin属性就派上用场了。以下是一个示例：

img {
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
  transition: transform 2s;
}

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

技巧四：结合transition和transform实现平滑过渡

通过结合transition和transform，我们可以实现平滑的旋转过渡效果。以下是一个示例：

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

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

技巧五：使用3D旋转创建立体效果

CSS3还允许我们使用3D旋转来创建更加立体的效果。以下是一个示例：

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

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