CSSで要素を斜体にする、傾斜させる方法/transform:skewプロパティの使い方

文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。

transform:skewプロパティの使い方

値は2つ指定し、それぞれx軸、y軸を角度(deg)で指定します。値をひとつしか指定しない場合はx軸のみ値が適用されます。
skewXおよびskewYで単体の指定も可能ですが、(x,y)と(y,x)と(xy)ではちがう結果になるという挙動がtransform:skewにはあり、今後仕様が変更される可能性があります。そのため新規の仕様は推奨されません。
ただ使い方によってはなかなか面白い結果になりますし、要素をアニメーションで表示したい場合などは多少仕様が変わってもあまり関係なさそうではあります。当分は大丈夫でしょうけどブラウザが対応しなくなる可能性はあります。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27

JavaScriptの使い方・メソッド・プロパティまとめ

HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

sunagitsune.com

2019.02.23