使用 HTML 和 CSS 制作旋转图像

使用 CSS 旋转图像

如果您正在创建一个Web应用程序，您可能需要使用CSS转换或旋转图像，那么您可以使用CSS属性“ transform”，它可以帮助您旋转图像，这是我们创建旋转类的基本示例90 度图像

.RotateImageBy90Degree {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

那么，看一下下面的示例，我们在其中给出了带有图像的 HTML 代码

<img src="https://via.placeholder.com/150" class="RotateImageBy90Degree ">

然后你会看到图像旋转90度，如下图

或者，您也可以通过提供 inline-css 来简单地旋转图像

<img src="https://via.placeholder.com/150" style="transform:rotate(90deg);">

如果你想旋转图像180度，你可以改变你的CSS如下

.RotateImageBy180Degree {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

270 度如下

.RotateImageBy270Degree {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

考虑到我们有如下 HTML

<img src="https://via.placeholder.com/150" class="RotateImageBy180Degree">

<img src="https://via.placeholder.com/150" class="RotateImageBy270Degree">

因此，如果您对上图应用更改，您将看到如下输出

使用 CSS 连续旋转图像

如果你想连续旋转图像，你可以使用transform带有animation关键帧属性的CSS。

考虑下面的 CSS

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

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

在上面的 CSS 中，我们使用无限变换的旋转，每次旋转的速度为 2 秒。

如果我们将上面的 CSS 应用到下面的 HTML 图像上

<img src="https://via.placeholder.com/150" class="rotate">

它将继续旋转（因为我们使用了无限循环），同时每次循环需要 2 秒。（从0->360度的变换时间为2秒）

翻转图像
transform您还可以使用带有scaleX的CSS来翻转图像，考虑使用下面的代码，其中我们使用单个箭头图像，但在CSS的帮助下显示左箭头和右箭头transform

<img
    style="transform: scaleX(-1); width:50px"
    src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/left-arrow.png'
    alt=''
  >
  
   <img
    style=" width:50px"
    src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/left-arrow.png'
    alt=''
  >

就是这样，希望这篇文章能够清除您与 CSS“变换”属性相关的概念，以及我们如何使用它来使用 HTML /CSS 旋转图像。