Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 Transform, skew and rotate

Tags:

css

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

like image 440
user789122 Avatar asked Dec 09 '22 18:12

user789122


1 Answers

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

like image 89
Patrick James McDougle Avatar answered Dec 11 '22 10:12

Patrick James McDougle