Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

CSS3 rotate a div on hover transition – CSS3 transition

CSS3 rotate a div on hover transition – CSS3 transition

In this tutorial I will show you how to rotoate a div with few lines of html and some css3 transitions.

The easiest way to rotate a div when you hover on his parent, is to put it with absolute position inside his parent, then when you hover you can do anything you want with this element because it's already in absolute position so it does not occupy space on the page.

Here is our HTML structure:

<div class="element_container">
<div class="rotate_me"></div>
</div>

 

 

CSS: 

 

.element_container{
position:relative;
height:100px;
width:100%;
background:rgba(255,255,255,0.4);
}
.element_container .rotate_me{
-webkit-transition:all 1.3s ease-out;
-moz-transition:all 1.3s ease-out;
-ms-transition:all 1.3s ease-out;
-o-transition:all 1.3s ease-out;
transition:all 1.3s ease-out;
height:50px;
width:50px;
position:absolute;
left:10px;
top:50%;
margin-top:-25px;
background:red;
}
.element_container:hover .rotate_me{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
left:80%;
}

 

The animation lasts 1.3 seconds and it works in both ways when you enter your cursor and go out of element with the cursor.

Go little below to see it in action. 

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Delfion Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Delfion
Guest
Delfion

This was nice!