如何在 HTML 中旋转图像？

您可以使用 CSS 变换属性轻松地在 HTML 中旋转图像。此属性用于移动、旋转、缩放和执行元素的各种变换。

方法：您可以使用定义为围绕 2D 平面上的固定点旋转元素而不使其变形的变换的 rotate()函数。它需要一个参数来定义旋转角度。旋转角度由两部分组成，旋转值后跟旋转单位。单位可以定义为度 (deg)、梯度 (grad)、弧度 (rad) 和匝数。 rotate()方法的值将顺时针旋转一个元素。

注意：要旋转 90 度，任何单位都可以与其对应的值一起使用。 90 度等于 100 个梯度或 0.25 圈。

句法：

transform: rotate(90deg);

建议在CSS中添加以下代码，以便您的代码与所有主要浏览器兼容，因为使用其他浏览器的人会看到它倒置。

CSS代码：

-webkit-transform:rotate(180deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);   /* Standard syntax */

例子：

HTML

  

    

  

    
GeeksforGeeks
  
    
        
    

  

输出：

• 不使用转换：rotate() 属性：

• 使用变换：旋转（）属性：