[分享]css中实现图片旋转的代码

CSS中实现图片旋转有多种方式，其中最常用的方式是通过transform属性为图片添加旋转效果。

/*通过transform属性实现图片旋转*/
img{
  transform:rotate(45deg);
} 

上述代码将图片旋转45度，如果需要根据鼠标位置旋转图片，则可以使用鼠标悬停事件和:hover伪类实现：

/*鼠标悬停时图片旋转*/
img:hover{
  transform-origin:center center;/*旋转中心为图片中心*/
  transform:rotate(45deg);
} 

如果需要实现连续的旋转效果，则可以通过动画实现：

/*通过动画实现图片旋转*/
@keyframes rotate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

img{
  animation:rotate 2s linear infinite;/*持续2秒，线性变化，无限循环*/
} 

上述代码将图片以线性变化的方式旋转360度，持续时间为2秒，并且无限循环旋转。

除了通过transform属性实现图片旋转，还可以通过CSS3中的transform-style属性为图片添加三维效果，实现更加生动的旋转效果：

/*通过transform-style实现3D旋转*/
.box{
  perspective:1000px;/*视角距离*/
}

img{
  transform-style:preserve-3d;/*保持3D效果*/
  animation:rotate 2s linear infinite;
} 

上述代码将图片添加了3D效果，同时也保持了通过动画实现的旋转效果。