Question

I’m looking at CSS3 Transform and wanting to have a box, both skewed and rotated.

I’ve tried using:

transform:rotate(80deg);
-moz-transform:rotate(80deg); /* Firefox */
-webkit-transform:rotate(80deg); /* Safari and Chrome */
-o-transform:rotate(80deg); /* Opera */
-webkit-transform: skew(50deg);
-moz-transform:skew(50deg);
-o-transform:skew(50deg);
transform:skew(50deg);

This only seems to skew the div.

Can you use skew and rotate on the same div?

Thanks

Answer 1

Instead of declaring the transforms more than once (the later rule always wins), you should separate your transforms by spaces like this:

transform: rotate(80deg) skew(20deg);

Don’t forget all the vendor prefixes before this rule.

You can see the syntax on the W3C’s working draft