![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkhlDqzzvXM77HYlUzchg4Z5x1dLNSzqFu4EIJ5tGzEswZN6G_KbvORLe4VVEnm1KeoV3vVbpIdqAwB5Ifn53iUaBWNXXsss3VwgqD92_LUGzwUt8zXlUanhmCqCuGauXa5neQvpTbms/s400/css3_transicion.jpg)
Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!
//CSS
<style>
.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
//HTML
<p><a class="my_class" href="#">Mouse over this example paragraph to <br/>see it rotate 7degrees using a transform transition.</a></p>