CSSのtransformのskewについて教えてください。

Question

MDNのWebサイトには、skew()関数は取り除かれたと記載があります。

translate()やrotate()、scale()関数はありますよね？
なぜ、skew()関数だけ取り除かれたのでしょうか？

傾斜の指定をするときは、skewX()関数とskewY()関数の2つで指定すればよいのでしょうか？

また、transform:skewY(30deg)と指定したときは、Y軸から30度傾斜するかと思いますが、どこの角度が30度になるのでしょうか？

同じくtransform:skewX(30deg)と指定したときは、どこの角度が30度になるのでしょうか？

文章で表現するのは難しいかもしれませんが、ご存じの方いれば教えてください。

Answer 1

skew() は取り除かれていませんが、互換性の為に残せ云々の記述は見られますね。
skewx(), skewY() の指定順で見た目が変化する事から混乱を招きそうだと判断したのでしょうか。

• CSS Transforms Module Level 1
• JSFiddle

「倣うより慣れろ」といいますが、まずは使ってみて挙動を確かめてみることをお勧めします。

• skewX() function (Internet Explorer)
• skewX() function (Internet Explorer)
• skew() function (Internet Explorer)

Comments

[退会済みユーザー]

回答ありがとうございます。
skew()関数は互換性のため、残る予定なんですね。
そもそも`skew(30deg,30deg)`を指定した場合と別々に`skewX(30deg) skewY(30deg)`を指定した場合で実行結果が違うことが驚きです。
これは確かに混乱を招きそうですね。
別々に指定しても`skew(30deg,30deg)`と同じ実行結果になればわかりやすいと思いますが、なぜそうしないのか謎ですね。
傾斜に関しても、検証して何となく把握できました。
コメント欄では細かい記述ができないので、検証結果は回答で投稿します。
参考サイトもありがとうございました。
今後も活用いたします。

Answer 2

質問者です。

この質問は、think49さんのお陰で解決しましたが、検証結果を回答に投稿します。

Google Chrome ver45 で検証した結果です。

※2015.9.8 12:12 検証方法に誤りがあり、訂正しました。

ポイントとなる箇所しか記述しませんが、それぞれ実行結果が異なります。

.skew:hover {
	transform:skew(30deg,30deg);
}
.skewXY:hover {
	transform:skewX(30deg) skewY(30deg);
}
.skewYX:hover {
	transform:skewY(30deg) skewX(30deg);
}

指定順により、実行結果が異なりますので注意してください。

次は、skewX()とskewY()の傾斜に関してですが、下記の図をご覧ください。

どこの軸に対して指定した角度で傾斜するか詳しくはわかりませんが、
結果から推測すると、skewXの場合はX軸方向に変形（傾斜）がかかり、
skewYの場合はY軸方向に変形（傾斜）がかかるようです。

Comments

[think49]

transform を2行に分けて書いたら2行目の宣言に1行目の宣言が上書きされます。
「transform: skewX(-20deg);transform: skewY(-20deg);」は「transform: skewY(-20deg);」と等価です。
並列して宣言する場合は1行に収める必要があります。
http://jsfiddle.net/of50qwkq/1/

[退会済みユーザー]

なるほど、続けて書く必要があるんですね^^;
片方しか反映されいないのは変な仕様だなと思ってたら、私の記述ミスでした><
回答も訂正しておきます。
何度もコメントありがとうございました^^