How to Rotate Object on Mouseover

28 April 2013

CSS Tricks, WebMasters

Rotate Object Using CSS3

You might have seen somewhere that when you bring your mouse pointer on the object, it rotates. The question that arises in your mind that how this has been created. This is made with the help of CSS3. CSS has a new function of transform to move the object as you wish. Mouseover event is applied by using “:hover“. Below is an example for you to understand rotation of an object.

HTML:

<div id=”object”>This is a box.
Mouse Over It.</div>

 

CSS:

#object {
width: 100px;
height:100px;
background-color: aqua;
border: 1px solid black;
transition: all 2s;
-webkit-transition: all 2s;
}

#object:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

 

Example:

This is a box.
Mouse Over It.
, , , , , , , ,

No comments yet.

Leave a Reply

*