CODEWITHSUNDEEP
jquerycssrotationtransform
Jon
Jon

Reputation: 195

css/javascript rotation but not from centre

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

Upvotes: 1

Views: 453

Answers (1)

Blender
Blender

Reputation: 298076

You can use transform-origin:

transform-origin: 0 0;

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

Upvotes: 4

Related Questions