图片旋转CSS

CSS的transform属性可以用来旋转元素，包括图片。在本文中，我们将了解如何使用CSS旋转图片。

语法

以下是CSS中用于旋转图片的transform属性的语法：

transform: rotate(deg);

其中deg表示要旋转的角度。

示例代码

假设有一张名为example.jpg的图片，我们想要将其逆时针旋转45度，代码如下：

img {
  transform: rotate(-45deg);
}

绕中心旋转

以上代码将从图片的左上角开始旋转，如果要在图片的中心点旋转，需要添加一些额外的样式。代码如下：

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

Transform-origin属性将图片的中心点设置为旋转的起点。

动画旋转

使用CSS的动画功能，我们可以将图片旋转到一定角度，然后停止旋转或反向旋转。代码如下：

img {
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

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

animation-name属性指定动画的名称，animation-duration属性指定动画的时间长度，animation-iteration-count属性指定动画的迭代次数（这里设置为无限次）。@keyframes规则定义动画的变化，其中from关键字指定动画的起点，to关键字指定动画的终点。在本例中，图片将无限次按顺时针方向旋转。

结论

通过本文，我们学习了如何使用CSS旋转图片，包括绕中心旋转和动画旋转。希望这篇文章能够帮助你掌握CSS的transform属性。