在 HTML 中旋转图像

Sushant Poudel 2023年2月19日 2021年10月2日

HTML HTML Imgae Rotation

本文将介绍一种在 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> 标签。同样，将图像旋转到 180deg 和 360deg。

下面的示例说明了一种在 HTML 图像源中旋转图像的方法。我们已经为 <img> 标签设置了样式，这意味着可以使用 transform:rotate() 属性旋转插入的图像。我们插入原始图像并将图像旋转到 90、180 和 360 度。我们可以在 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>

Author: Sushant Poudel

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.

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

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