【CSS Modules】skew()関数の使い方
skew()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
skew()関数は、HTML要素などの視覚的な表示を2次元平面上で傾けたり、歪ませたりする変形（transform）を実行する関数です。
この関数はCSSのtransformプロパティの値として使用され、要素の形状を動的に変更する際に利用されます。skew()関数は、1つまたは2つの角度を引数として受け取ります。
引数が1つの場合、例えばskew(30deg)のように記述すると、要素は主にX軸（水平方向）に対して指定された角度だけ傾けられます。このとき、Y軸（垂直方向）の傾きは発生しません。
引数が2つの場合、例えばskew(30deg, 20deg)のように記述すると、1つ目の角度はX軸方向の傾きを、2つ目の角度はY軸方向の傾きを指定します。角度の単位は、deg（度）、rad（ラジアン）、grad（グラジアン）、turn（ターン）などが利用可能です。
正の角度を指定すると要素は時計回りに、負の角度を指定すると反時計回りに傾くように見えます。この機能により、デザインにユニークな視覚効果を加えたり、要素に奥行きや動きの錯覚を与えることが可能となり、ユーザーインターフェースのデザイン表現の幅を広げるのに役立ちます。
公式リファレンス: skew()
構文(syntax)
1transform: skew(angleX, angleY);
引数(parameters)
ax: <angle>, ay: <angle> = ax
- ax: <angle>: X軸方向の傾きを指定する角度
- ay: <angle> = ax: Y軸方向の傾きを指定する角度。省略された場合は、X軸方向の傾きと同じ値が使用されます。
戻り値(return)
<transform-function>
skew()関数は、要素を2次元で歪ませるための変形関数です。x軸方向とy軸方向それぞれに指定した角度だけ要素を傾ける効果を生成します。