Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Rotate Image in HTML?
Images are an important part of the web page, and they need to be rotated sometimes to make them look better or fit on a web page. Image rotation in HTML is a relatively simple process that can be completed using CSS.
The process of changing the orientation of an image from a specific angle is called image rotation. The CSS transform property is a common and easy way to rotate an image. This property is used to move, rotate, scale, and perform several kinds of transformations of elements.
Syntax
Following is the syntax to rotate image in HTML
selector {
transform: rotate(angle);
}
Here "angle" is the amount of rotation to apply to the element, specified in degrees.
Method 1: Using CSS Transform Property
The transform property is the most common way to rotate an image or element in CSS. The rotate() function is used to rotate an element. The rotate() function takes a degree value as its argument, which specifies the angle of rotation.
Example: Static Image Rotation
Here is a full code example to rotate an image by 90 degrees using the CSS transform property
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.normal-img {
margin: 10px;
padding: 5px;
border: 3px solid #555;
width: 100px;
}
.rotated-img {
transform: rotate(90deg);
margin: 20px;
padding: 5px;
border: 3px solid #e74c3c;
width: 100px;
}
</style>
</head>
<body>
<h3>Normal Image</h3>
<img src="/images/html.gif" class="normal-img" alt="Normal Image">
<h3>Rotated Image (90 degrees)</h3>
<img src="/images/html.gif" class="rotated-img" alt="Rotated Image">
</body>
</html>
Two images are displayed - the first image appears normally, while the second image is rotated 90 degrees clockwise with a red border.
Method 2: Using CSS Hover Effects
CSS hover effects create dynamic and interactive web pages by rotating an image when the user hovers over it. We use the :hover pseudo-class in CSS to achieve this effect.
Example: Hover Rotation
Here is a full code example to rotate an image by 60 degrees using the :hover pseudo-class
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 50px;
}
.hover-img {
border: 3px solid #3498db;
width: 120px;
transition: transform 0.3s ease;
cursor: pointer;
}
.hover-img:hover {
transform: rotate(60deg);
}
</style>
</head>
<body>
<h3>Hover over the image to rotate it by 60 degrees</h3>
<img src="/images/html.gif" class="hover-img" alt="Hover to Rotate">
</body>
</html>
An image with a blue border is displayed. When you hover over it, the image smoothly rotates 60 degrees and returns to normal when the cursor moves away.
Method 3: Using CSS Animations
CSS animations allow you to create continuous image rotation effects. We use the @keyframes rule to define the rotation animation and the animation property to apply it.
Example: Continuous Rotation Animation
Here is a full code example to rotate an image continuously using CSS animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 50px;
}
.animated-img {
border: 3px solid #27ae60;
width: 100px;
animation: rotation 3s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h3>Continuously Rotating Image</h3>
<img src="/images/html.gif" class="animated-img" alt="Rotating Image">
</body>
</html>
An image with a green border continuously rotates 360 degrees every 3 seconds in a smooth, infinite loop.
Possible Rotation Values
| Value | Description | Example |
|---|---|---|
90deg |
Quarter turn clockwise | transform: rotate(90deg); |
-90deg |
Quarter turn counter-clockwise | transform: rotate(-90deg); |
180deg |
Half turn | transform: rotate(180deg); |
360deg |
Full turn | transform: rotate(360deg); |
Conclusion
Rotating images in HTML using CSS provides various creative possibilities for web design. The transform property offers simple static rotation, hover effects create interactive elements, and CSS animations enable dynamic continuous rotation effects.
4K+ Views
