CSS3变换,倾斜和旋转

时间:2013-01-15 16:24:02

标签: css3

我正在研究CSS3变换,并希望有一个倾斜和旋转的盒子。

我尝试过使用:

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);

这似乎只会扭曲div。

你可以在同一个div上使用倾斜和旋转吗?

由于

1 个答案:

答案 0 :(得分:12)

不是多次声明变换(后面的规则总是胜利),你应该用以下空格分隔你的变换:

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

不要忘记此规则之前的所有供应商前缀。

您可以在W3C's working draft

上看到语法