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でスキューと回転を使用できますか？

ありがとう

Answer 1

変換を複数回宣言するのではなく（後のルールが常に優先されます）、次のように変換をスペースで区切る必要があります。

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

このルールの前に、すべてのベンダープレフィックスを忘れないでください。

W3Cのワーキングドラフトで構文を見ることができます