Skip to content
Related Articles

Related Articles

Improve Article

How to rotate an element using CSS ?

  • Last Updated : 31 Aug, 2020
Geek Week

The purpose of this article is to rotate an HTML element by using CSS transform property. This property is used to move, rotate, scale and to perform various kinds of transformation of elements.

The rotate() function can be used to rotate any HTML element or used for transformations. It takes one parameter which defines the rotation angle. The rotation angle consists of two parts, the value of the rotation followed by the unit of rotation. The unit can be defined in degrees (deg), gradient (grad), radians (rad) and turns.

Syntax:

transform: rotate(90deg);

Example: The following example demonstrates rotation of an image by 45 degree.

HTML




   
 <!DOCTYPE html> 
<html
  
<head>     
    <style
        body { 
            text-align:center; 
        
        h1 { 
            color:green; 
        
        .rotate_image { 
            transform: rotate(45deg); 
        
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1
    <h2>
        How to rotate an element using CSS?
    </h2
      
     <img class="rotate_image" src
          alt="GeeksforGeeks logo"
</body
  
</html>


Output:
Before Rotation:

After Rotation:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :