# How to Rotate Image in HTML ?

Last Updated : 12 Jan, 2024

In this article, we will see how to rotate images in HTML. To change the orientation of an image in HTML, you can utilize the CSS property called “transform” along with the “rotate” function. This property, when applied to the image element, enables you to specify the rotation angle (e.g., “transform: rotate(90deg);” for a 90-degree rotation). Simply adjust the angle as required to achieve the desired rotation effect.

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.

Table of Content

## `rotate()`Â function

TheÂ rotate()Â function is an inbuilt function that is used to rotate an element based on the given angle as an argument. The angle can be set in terms of degrees, gradians, radians, or turns.Â

### Syntax:

`transform: rotate(90deg);`

Example: Implementation of the transform rotate property

## HTML

 `` `<``html``>`   `<``head``>` `    ``<``style``>` `        ``body {` `            ``text-align: center;` `            ``margin-top: 100px;` `        ``}`   `        ``.rotate-image {` `          `  `          ``/* Adjust the angle as needed */` `          `  `            ``transform: rotate(45deg);` `            ``margin-top: 100px;` `        ``}` `    ``` ``   `<``body``>` `    ``<``h1` `style``=``"color: green;"``>` `      ``GeeksforGeeks` `      ``` `      ``<``h3``>` `      ``Using transform: rotate() Property` `      ``` `    ``<``img` `src``=` `"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"` `         ``alt``=``"Rotated Image"` `         ``class``=``"rotate-image"``>` ``   ``

Output:

## `scaleX()`Â function

The scaleX() function is an inbuilt function which is used to resize an element along the x-axis in a 2D plane. It scales the elements in a horizontal direction.Â

### Syntax:

```transform : scaleX( number )

// number is scalling factor
```

Example: Implementation of the transform scaleX( ) property

## HTML

 `` `<``html``>`   `<``head``>` `    ``<``style``>` `        ``body {` `            ``text-align: center;` `            ``margin-top: 100px;` `        ``}`   `        ``.rotate-image {` `            ``transform: scaleX(1.5);` `          `  `            ``/* Adjust the scaling factor as needed */` `          `  `            ``margin-top: 100px;` `        ``}` `    ``` ``   `<``body``>` `    ``<``h1` `style``=``"color: green;"``>` `      ``GeeksforGeeks` `      ``` `    ``<``h3``>` `      ``Using transform: scaleX() Property` `      ``` `    ``<``img` `src``=` `"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"` `         ``alt``=``"Rotated Image"` `         ``class``=``"rotate-image"``>` ``   ``

Output:

## `scaleY()`Â function

TheÂ scaleY( ) functionÂ is an inbuilt function which is used to resize an element along the y-axis in a 2D plane. It scales the elements in a vertical direction.Â

### Syntax:

```transform: scaleY( y )

// y is scalling factor
```

Example: Implementation of the transform scale( ) property with an example.

## HTML

 `` `<``html``>`   `<``head``>` `    ``<``style``>` `        ``body {` `            ``text-align: center;` `            ``margin-top: 100px;` `        ``}`   `        ``.rotate-image {` `            ``transform: scaleY(1.5);`   `            ``/* Adjust the scaling factor as needed */`   `            ``margin-top: 100px;` `        ``}` `    ``` ``   `<``body``>` `    ``<``h1` `style``=``"color: green;"``>` `      ``GeeksforGeeks` `      ``` `    ``<``h3``>` `      ``Using transform: scaleY() Property` `      ``` `    ``<``img` `src``=` `"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"` `         ``alt``=``"Rotated Image"` `         ``class``=``"rotate-image"``>` ``   ``

Output:

Previous
Next