Question

I wish to create a hover rotation effect using css or javascript but instead of rotating from the centre like it usually does i wish to rotate from the top left point of the square.

The square will rotate 90 degrees on hover then back on mouse out. Can i widen the hover area to avoid the square to flutter(repeat constantly).

I will try to show my thought process using awful diagrams, the cross is the rotation point.

_________
|       |
|   +   |
|       |
---------

to this:

+--------         
|       |   
|       |   
|       |   
---------   

Many thanks

Answer 1

You can use transform-origin:

transform-origin: 0 0;

And a demo: http://jsfiddle.net/ssRS4/2/