How to Rotate an Image on Hover in CSS ?
Last Updated :
21 Mar, 2024
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:
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.
HTML
<!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.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
alt="GeeksforGeeks Logo"
class="rotateImg">
</div>
</body>
</html>
Output:
Output
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.
HTML
<!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.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
alt="GeeksforGeeks Logo"
class="rotateImg">
</div>
</body>
</html>
Output:
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.
HTML
<!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.geeksforgeeks.org/wp-content/uploads/20240305215328/gfglogo.png"
alt="GeeksforGeeks Logo">
</div>
</body>
</html>
Output:
Output
Share your thoughts in the comments
Please Login to comment...