在 HTML 中旋转图像

Sushant Poudel 2023年2月19日 2021年10月2日
在 HTML 中旋转图像

本文将介绍一种在 HTML 中旋转图像的方法。

在 HTML 中使用 transform CSS 属性旋转图像

CSS transform 属性意味着修改我们代码中的特定元素。我们需要一个外部资源,在这种情况下我们转换的图像,来转换它。此属性将 2D 或 3D 变换应用于元素。此外,此属性还授予对细节进行旋转、缩放、移动、倾斜等操作的授权。它还改变了 CSS 视觉格式模型的坐标空间。布局受 CSS 盒模型控制的元素只能进行转换。我们可以将 transform 属性设置为 rotate() 函数,在函数中提及用于在 HTML 中旋转图像的单位。图像要旋转的值应在函数的括号中提供。deg 单位用于指定旋转值。为此,我们可以使用内联 CSS。CSS 将用于 <img> 标签。

例如,在 HTML 中插入带有 <img> 标签的常规图像。将 src 属性设置为 https://loremflickr.com/320/320。然后,对于 90 度旋转,插入图像并为其添加一些样式。在 style 属性中,将 transform 属性设置为 rotate(90deg)。然后,添加一个 <br> 标签。同样,将图像旋转到 180deg360deg

下面的示例说明了一种在 HTML 图像源中旋转图像的方法。我们已经为 <img> 标签设置了样式,这意味着可以使用 transform:rotate() 属性旋转插入的图像。我们插入原始图像并将图像旋转到 90180360 度。我们可以在 rotate() 函数中写入所需的度数值。示例中的第二个图像最多旋转轴的一半。第三张图片看起来是倒置的,因为它被旋转了 180 度。当图像完成 360 度旋转时,它看起来像原始图像。因此,我们可以使用 transform() 属性和 rotate() 值来使用 HTML 和 CSS 旋转图像。

示例代码:

<html>
<body>
 Original Image
 <img src="https://loremflickr.com/320/320" /> <br>
 90 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
 180 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
 360 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn