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.