How to Rotate Image in HTML?
Last Updated :
08 Oct, 2024
Rotating and scaling images in HTML can enhance the visual presentation of your web content. By using CSS properties like transform, you can easily change the orientation and size of images. This will help you understand the process of rotating images using the rotate() function and scaling images with the scaleX() and scaleY() functions.
Rotating an Image with CSS
To rotate an image in HTML, you can use the transform: rotate() property. This property allows you to change the orientation of an image by a specified angle, measured in degrees, gradians, radians or turns.
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);
Example: Implementation of the transform rotate property
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin-top: 100px;
}
.rotate-image {
/* Adjust the angle as needed */
transform: rotate(45deg);
margin-top: 100px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Using transform: rotate() Property
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="Rotated Image"
class="rotate-image">
</body>
</html>
Output:
Scaling Images with CSS
In addition to rotating, you can also scale images along the x-axis and y-axis using the scaleX() and scaleY() functions.
1. 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
<!DOCTYPE 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;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Using transform: scaleX() Property
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="Rotated Image"
class="rotate-image">
</body>
</html>
Output:
2. 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(scalingFactor);
Example: Implementation of the transform scale( ) property with an example.
HTML
<!DOCTYPE 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;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Using transform: scaleY() Property
</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="Rotated Image"
class="rotate-image">
</body>
</html>
Output:
