How to Rotate an Image on Hover in CSS ?
In CSS, we can add a rotation effect on the image on hover. This increases the interactiveness of the application. We are going to learn how can we rotate an image on hover using CSS.
Below are the approaches to rotate an image on hover using CSS:
Table of Content
- Using transform Property(Clockwise Rotation)
- Using transform Property(AntiClockwise Rotation)
- Using KeyFrames
Clockwise Rotation of an Image using transform Property
In this approach, the image rotates clockwise by 180 degrees on hover using the CSS transform property, providing an animation effect. The transition property ensures a gradual rotation with a duration of 0.5 seconds.
Syntax:
.rotateImg:hover {
transform: rotate(180deg);
}
Example: The below example uses the transform Property to rotate the image in a Clockwise Rotation on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Image on hover </title>
<style>
h5 {
text-align: center;
}
.image-container {
text-align: center;
}
.rotateImg {
width: auto;
height: 100px;
transition: transform 0.5s ease;
}
.rotateImg:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<h5>Clockwise Rotation of an Image
using tranform Property
</h5>
<div class="image-container">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20230816191453/gfglogo.png"
alt="w3wiki Logo"
class="rotateImg">
</div>
</body>
</html>
Output:
Anti-clockwise rotation of an Image using transform Property
In this example, the image has an anti-clockwise rotation of 180 degrees on hover using the CSS transform property, resulting in an animation effect. The transition property makes a gradual rotation with a duration of 0.5 seconds.
Syntax:
.rotateImg:hover {
transform: rotate(-180deg);
}
Example: The below example uses the transform Property to rotate the image in Anti-Clockwise Rotation on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Using tranform Property</title>
<style>
h5 {
text-align: center;
}
.image-container {
text-align: center;
}
.rotateImg {
height: 100px;
transition: transform 0.5s ease;
}
.rotateImg:hover {
transform: rotate(-180deg);
}
</style>
</head>
<body>
<h5>Anti-Clockwise Rotation of an Image
using tranform Property
</h5>
<div class="image-container">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20230816191453/gfglogo.png"
alt="w3wiki Logo"
class="rotateImg">
</div>
</body>
</html>
Output:
Using KeyFrames
In this example, we are using CSS keyframe animations to rotate an image on hover. The rotation is achieved by defining a keyframes animation called “rotateImage” that rotates the image along the Z-axis from 0 to 360 degrees when hovered over.
Syntax:
@keyframes rotateImage {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
Example: The below example uses KeyFrames to rotate the image on hover using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotation of an image on
hover using KeyFrames
</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.image {
height: 100px;
transition: transform 0.5s;
transform-style: preserve-3d;
perspective: 1000px;
}
.image:hover {
animation: rotateImage 1s infinite;
}
@keyframes rotateImage {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>
</head>
<body>
<h5>Rotation of an image on hover using KeyFrames</h5>
<div class="container">
<img class="image" src=
"https://media.w3wiki.net/wp-content/uploads/20240305215328/gfglogo.png"
alt="w3wiki Logo">
</div>
</body>
</html>
Output: