css - CSS3 变换、倾斜和旋转

Question

我正在查看 CSS3 Transform 并希望有一个倾斜和旋转的盒子。

我试过使用：

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 上使用 skew 和 rotate 吗？

谢谢

Answer 1

不要多次声明转换（后面的规则总是胜出），您应该用空格分隔转换，如下所示：

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

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

你可以在W3C 的工作草案上看到语法