CSS3 变换、倾斜和旋转答案

【问题标题】：CSS3 Transform, skew and rotateCSS3 变换、倾斜和旋转
【发布时间】：2013-01-15 16:24:02
【问题描述】：

我正在研究 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 上使用倾斜和旋转吗？

谢谢

【问题讨论】：

在转换之间使用逗号
类似-webkit-transform: skew(20deg), rotate(80deg) ?
我是这么认为的，但也许不是。
我试过了：-webkit-transform: skew(20deg) rotate(80deg); 这似乎有效

标签： css

【解决方案1】：

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

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

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

你可以在W3C's working draft上看到语法

【讨论】：

太棒了。我进行了一些尝试和错误，并设法找到了解决方案。