How to rotate a square shaped element over its diagonal axis with CSS?

Question

Given a square, how can I rotate it such as the element flips with its diagonal being the origin of rotation? I managed to flip it using:

-webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);

you can see an example here

but this does not rotate on the diagonal axis. How can I achieve that? Basically what I am trying to achieve is that when the element rotates, its top right corner, and bottom left corner don't go out of place.. Thanks and sorry for my bad English/explanation :S!

Answer 1

It looks like I'm a bit late to the party, but

-webkit-transform: rotate3d(-2,1, 0,-180deg);

may give you the behavior you're looking for.

Answer 2

as you can see at this jsfiddle , a combination of matrix-transformation and scaling works. with a background-image the effect gets more obvious.

Answer 3

If I understand your problem correctly, you just need to add this:

-webkit-transform-origin: left bottom

If that isn't it exactly look here for information on how to change the origin of the rotation: https://developer.mozilla.org/en/CSS/transform-origin