如何使用 JavaScript 将 HTML div 元素旋转 90 度？

使用transform属性可以将元素旋转 90 度。此属性用于移动、旋转、缩放等以对元素执行各种变换。
rotate()变换函数可以用作旋转元素的值。它需要一个参数来定义旋转角度。旋转角度由两部分组成，旋转值后跟旋转单位。单位可以定义为度 (deg)、梯度 (grad)、弧度 (rad) 和匝数。

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

将此属性应用于所需元素会将其旋转 90 度。

句法：

// Using CSS
transform: rotate(90deg);

// Using JavaScript
element.style.transform = 'rotate(90deg)';

示例：示例使用矩形和边框的一侧来解释旋转。

  

    
        How to rotate an HTML div element
        90 degrees using JavaScript ?
    
      
    
        .box {
            height: 250px;
            width: 150px;
            border-right: 5px solid;
            background-color: lightgreen;
        }
    

  

    
        GeeksforGeeks
    
      
    
        How to rotate an HTML div
        element in 90 degrees?
    
      
    
        Click on the button below to rotate
        the element by 90 degress.
    
      
    
      
    
        Rotate by 90 degrees
    
      
    
        function rotateElem() {
            document.querySelector('.box').style.transform
                       = 'rotate(90deg)';
        }
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：