How to use CSS3 property 'transform' in Hover Effect in simple steps?

[arronmattwills]

We can easily transform the website elements as per our wish in a coordinate space without using big lengthy java script. We can do it with a simple C S S 3 code. With this C S S 3 transform we can rotate an element, skew it, translate it and scale it. It will brins awesome look especially in hover effects.

.myDemoClass a:hover {
width: 33em;
border: solid blue;

-webkit-transform: translate(500px) rotate(20deg);
-webkit-transform-origin: 50% 100%;

-moz-transform: translate(500px) rotate(20deg);
-moz-transform-origin: 50% 100%;

-o-transform: translate(50px) rotate(20deg);
-o-transform-origin:50% 100%;

transform: translate(50px) rotate(20deg);
transform-origin: 50% 100%;
}

Transform functions: rotate, scale, skew and translate.

Supporting Browsers: Mozilla fire fox, internet explorer 9 and above, safari and chrome,.