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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With