CSSアニメーション、
傾斜〜transform:skewについて。

0〜90°以外の状態。

ここまでtransform:skewの値を「0° < 角度 < 90°」の状態で試してきましたが、90°以上やマイナスの角度ではどうなるのでしょうか？

#sample { transform:skewX(「「１θ」」deg); }

要素にskewXをかけた上で、少しずつ角度「θ」の値を変えながら見ていきます。

傾斜角度「0°」、初期値の状態です。

0°以外の角度を与えると傾斜が始まります。
90°に達するまで、要素は反時計回りに歪んでいきます。

そして90°のとき。
要素は完全につぶれてしまうため非表示になってしまいます。
傾斜すればするほど要素の幅は大きくなるため、「幅が無限大になってしまった」ので表示できなくなった、とも言えます。

角度が90°を超えると、今度は逆方向から傾斜を徐々に戻してきます。

180°のところで、要素の見た目は元の状態に。

半周で１セット。

以降、180°ごとにこの動きを繰り返します。rotateと違い、「半周」で１セットのような感じです。
そしてこれはマイナスの領域も含みます。試しにマイナスの角度に歪ませてみましょう。

#sample { animation:sample 1s alternate infinite; } @keyframes sample ｛ bbto { transform:skewX「「１(-40deg)」」; } bb｝

マイナスの角度を指定したので、逆側にskewしました。180°ループの後半部分です。

今度は-180°から+360°までアニメーションさせてみましょう。

#sample { animation:sample 3s infinite; } @keyframes sample ｛ bbfrom { transform:skewX「「１(-180deg)」」; } bbto { transform:skewX「「１(1turn)」」; } bb｝

-180°〜360°まで傾斜角を変化させました。
その間、３回ループしています。180°（半周）が１セットになっていることがわかります。

実例サンプル。

それではtransform:skewを使った実例を紹介します。

　■ wiggle（揺らす）。

要素にマウスカーソルを乗せる（タッチデバイスの場合はタップ)と、小刻みに震えるサンプルです。
hover（擬似クラス）を使用。高速で＋ー方向にskewさせています。

#skewimg:hover { animation:skewimg 「「４0.1s」」 infinite; } @keyframes skewimg ｛ bbfrom { transform:skewX「「４(-2deg)」」; } bbto { transform:skewX「「４(2deg)」」; } bb｝

　■ 背景のみskew。

テキストの背景のみがskewするCSSアニメーション。
<div>でテキスト要素を囲んで親子構造にし、親要素に適当なskewのキーフレームを指定。

そのあと子要素であるテキストには逆skewのキーフレームを指定し、skewをキャンセルさせています。

<div class = 「「５"soto"」」> bb<p class = 「「５"naka"」」> bb背景のみskew bb</p> </div>

「「５.soto」」 { margin:0 auto; background-color:aqua; width:50%; animation:soto 1s linear alternate infinite; } @keyframes soto ｛ bbfrom { transform:skewX「「１(135deg)」」; } bb｝ 「「５.naka」」 { text-align:center; animation:naka 1s linear alternate infinite; } @keyframes naka ｛ bbfrom { transform:skewX「「１(-135deg)」」; } bb｝

　■ とある条件で反転。

X、Y成分のskewが以下の条件で指定されたとき、要素が反転します。

x<90° かつ y<90° で、 さらに x+y>90° となるとき。

仕組みは次回以降の記事で解説しますが、この性質を取り入れると不思議な動きのCSSアニメーションが実装できます。

<img id = "img1" src = "cyan.svg"> <img id = "img2" src = "magenta.svg">

#img1,#img2 { display:block; width:10%; margin:0 auto; } #img1 { animation:img1 4s linear alternate infinite; } @keyframes img1 ｛ bbto { transform:skew「「１(60deg,80deg)」」; } #img2 { animation:img2 4s linear alternate infinite; } @keyframes img2 ｛ bbto { transform:skew「「１(80deg,60deg)」」; }

正体はまた今度。

最後までお読みくださり、ありがとうございました。
今回はtransformのskew関数についてお伝えしてきましたが、指定に対する結果が「直感的ではない」と感じた方もいらっしゃるかと思います。rotateやscale、他の関数に比べて「skew」は少し特殊な仕組みになっているのです。

今回はtransform:skewの基本的な性質と使い方に焦点を絞りお伝えしたかったため、詳しい解説は別の記事で取り上げさせていただきます。

みなさんのほうでも、skewの値を色々と変えて実験しておいてください。
次回「skewの正体編」でお会いしましょう。ではまた〜 ♪