CSS Rotate Image Animation on Hover

A few months back, we created CSS image rotate animation that triggers on click event. But if you need to rotate an image on hover event then what you need to do? Well! in this tutorial, we are going to create CSS rotate image animation that plays on hover.

Unlike the click rotation, it does need any complex HTML structure or tricky CSS coding. Everything described in this tutorial to rotate the image is simple and straightforward.

Before getting started with coding, I’ll suggest you check the demo page to see three different image rotation examples. It’s great if you’ve already visited the demo page and checked the 3D rotation, 2D rotate animation on X-axis and Y-axis. Now, let’s get started with HTML to implement these rotate animations.

Rotate Image Animation HTML Structure

The HTML for image rotation animation is as simple as one line of code. You just need to wrap your image into a div element in order to rotate it on the hover event. Create a div element with the class name image_box and rotate. Place your image inside it as following code:

<div class="image_box rotate"> <img src="path/to/image.jpg" alt="image"> </div>

Add the following mentioned classes for the 2D X-axis or Y-axis rotation.

<p>2D Rotate  X axis</p>
<div class="image_box rotateX">
   <img src="image/image-1.jpg" alt="image 2D Rotate  X axis">
</div>
<p>2D Rotate Y axis</p>
<div class="image_box rotateY"> 
   <img src="image/image-2.jpg" alt="image 2D Rotate Y axis">
</div>
<p>3D Rotate 360deg</p>
<div class="image_box rotate"> 
   <img src="image/image-3.jpg" alt="image 3 rotate 360">
</div>

You can also add any extra HTML elements inside your image box such as text for images or hyperlinks.

The CSS Styles

In CSS, we’ll target the image_box (wrapper of the image) selector and define its style just like a box. So, define its width, maximum width, and padding property. Similarly, add some border-radius and background color for the image box. In order to adjust the box to the center of the page, use the left and right margin.

.image_box {
    width: 80%;
    max-width: 640px;
    margin: 0 auto;
	padding: 24px;
	border-radius: 5px;
    background-color: #f2f2f2;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

Define the image width as a hundred percent and height auto to make it responsive.

.image_box img {
	width: 100%;
	height: auto;
}

Now, its time to define CSS rotate transformation using a hover pseudo-selector. Keep the transform-origin center and specify transition duration for smoothness. Furthermore, define the WebKit and Moz vendor-prefixed properties for cross-browser support.

.rotate:hover {
	transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition:  2s ease all;
	-moz-transition: 2s ease all;
	-webkit-transition:  2s ease all;
}

Similarly, define CSS 2D rotate transformation for rotateY class. You can set the custom value for the rotation angle according to your needs.

.rotateY:hover {
	transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: 2.0s ease;
	-moz-transition: 2.0s ease;
	-webkit-transition: 2.0s ease;
}

Define CSS styles for rotateX class to rotate your image on X-axis. The other properties like transform-origin and transitions are similar to the above CSS code snippet.

.rotateX:hover {
	transform: rotateX(360deg);
	-moz-transform: rotateX(360deg);
	-webkit-transform: rotateX(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: 2.0s ease;
	-moz-transition: 2.0s ease;
	-webkit-transition: 2.0s ease;
}

All you have done! I hope now you are able to create rotate image animation on hover using CSS. If you need any further help, don’t hesitate to comment below.