CSSで傾きや歪みをつける「transform: skew()」をまとめました

シェアする：

更新日時：2022年3月2日

今回はCSSの「transform: skew()」について調べました。

こういう↓感じのちょっと傾いたメニューを作りたかったんです。

MDNの情報をベースに、自分で動かしてみて、使い方を覚えたいと思います。

skewの書き方

基本的な書き方はこの↓ような感じ。 


transform: skew(XXXX);
transform: skew(XXXX, YYYY);

引数を1～2つ取ることができ、「XXXX」に「X軸の歪みの量」を、「YYYY」に「X軸の歪みの量」を指定します。

この↓ように、ブロック要素を平行四辺形に変形させることができます。

transform: skew(8deg, 5deg);

引数の単位は以下の4パターンで指定できるようです。

  • 度(deg)：いつものアレ
  • グラード(grad)：一周が400grad
  • ラジアン(rad)：数学のアレ、一周が6.2832rad
  • 回転数(turn)：一周が1turn

グラードというのは初めて知りました。 90度を1単位(100grad)として計算する感じでしょうか。

turnは90度なら0.25turn、180度なら0.5turnと、直感的で使いやすそうですね。

skewの挙動

ちょこちょこ数字をいじってskewの挙動を調べてみました。

Y軸の歪みの挙動

Y軸の挙動は分かりやすいです。

transform: skew(0, 5deg);

左側をY軸として、時計回りに開店していることが分かります。

X軸の歪みの挙動

対して、X軸の挙動はちょっと分かりにくく、感覚的なX軸に対して反時計回りに回転するようです。

transform: skew(5deg, 0);

上側を軸としてみても同様に反時計回り。

transform: skew(5deg, 0);

似た関数の「rotate」は時計回りに回転するので、間違いそうです。

skewで内側の要素の歪みはどうなるか

ブロックの持つ背景や枠線以外に、内側の要素が歪むのかどうかを調べました。

テキストは歪むか

歪みます。

transform: skew(5deg, 0);

画像は歪むか

歪みました。

画像として置いた場合だけでなく、背景に設定した場合にもちゃんと歪みます。

個別指定のskewXとskewY

X軸を個別に指定するのが「skewX」、Y軸を個別に指定するのが「skewY」です。 次の2つは同じ挙動になります。 


transform: skew(XXXX, YYYY);

transform: skewX(XXXX);
transform: skewY(YYYY);

どちらかというと「Y軸だけ」指定したい場合に使うプロパティじゃないかと思います。 X軸はskewでも使えるので次の2つは同じ挙動です。 


transform: skew(XXXX);

transform: skewX(XXXX);

rotateとの違い

「transform: rotate」はこの↓ように形を変えずに回転します。

transform: rotate(5deg);

対して「transform: skew」はこの↓ように形をゆがめるものです。

transform: skew(-10deg);

skewのブラウザ対応状況

MDNによると、モダンブラウザではフルサポートのようです。

以上、WordPressからお届けしました！

シェアする：
CSS