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. 

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Delfion
Delfion
7 years ago

This was nice!

1
0
Would love your thoughts, please comment.x
()
x