Skip to content
Related Articles

Related Articles

Improve Article

How to Rotate Image in HTML ?

  • Last Updated : 22 Jun, 2021

You can easily rotate images in HTML using the CSS transform property. This property is used to move, rotate, scale, and perform various kinds of transformations of elements.

Approach: You can use rotate() function defined as a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. 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. The value with the method rotate() will rotate an element clockwise.

Note: To rotate by 90 degrees any of the units can be used with their corresponding values. 90 degrees would equal 100 gradients or 0.25 turns.

 



Syntax:

transform: rotate(90deg);

It is recommended to add the below code in CSS so that your code is compatible with all major browsers because people using other browsers will see It upside down.

CSS code:

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

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .rotate_image {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <center>
        <img class="rotate_image"
            src=
            alt="GeeksforGeeks logo">
    </center>
</body>
  
</html>


Output:

  • Without using transform: rotate() property:

  • Using transform: rotate() property:

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 :