Rotate Image by 180 degree on Hover

 In this blog, I will show how to create cool 180 degree rotate of an image and show another image in the place of the first one when rotated.

To achieve this, create a div. In that div, create two more child div elements. First div child will contain the front image to display, second div will contain the back image to be displayed.

When we hover over the front image, it will rotate 180 along x axis and displays back image.

We will give outer div a class selector name image like <div class="image"></div> and first child with class selector name front and back image with back as class selector name.

Now, our html is ready, without any CSS properties, our rotate image will look like below.

Now, let us apply CSS magic. Before that, let us learn about the CSS Properties used.

CSS Properties Description

Cursor Property

• When hovering over an element, what mouse cursor should be displayed.
• Here, it shows cursor as pointer which means a hand pointer with index finger.

Width and Height Properties

• Specifies the width and height of the image.

In HTML, we added class selectors with class tags. In CSS, we identify them by .[className]

We can use this class with any tag. This tag will let us add style properties to that particular HTML tag.

Overflow Property

• This property specifies what to do when the content is too big to fit the specified area. By default, it is set to visible which means it will not clip the content and overflow is visible. We set it to hidden which means, it will clip the content and clipped content is hidden.

Back face visibility

• This property specifies whether the back face of an element should be visible to user. For our use case, when rotated, the element’s back face should be hidden. So, we set it to hidden. You can try out how our image looks when it is set to visible.

Position Property

• This property helps us to position our second image behind our first image. We use absolute value for this property.

Transition Property

• We use this property to create a transition effect of rotating our image with duration 0.6s.
• First field is transform property and second is duration. Third is transition-timing function.
• Our transition property: transform 0.6s linear. Do not set duration to zero, this transition property will have no effect.

Transform Property

• Transition property uses this. Front image while on resting is at degree 0. Back Image is at 180 and invisible because of back face visibility is hidden. On hover, Back will rotate and comes to front and front will go back and will be hidden. The effect of this rotation is 0.6 seconds to have normal effect. If increased, this rotation is slow and if duration is reduced, it is super fast.

Code on Code Pen

Code Pen Link - Rotate Image by 180 degree on hover