CODEWITHSUNDEEP
css
Jonas
Jonas

Reputation: 588

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

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!

Upvotes: 3

Views: 7526

Answers (3)

sconway
sconway

Reputation: 146

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.

Upvotes: 5

oezi
oezi

Reputation: 51797

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

Upvotes: 1

alexwells
alexwells

Reputation: 1253

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

Upvotes: 0

Related Questions