CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのskew()関数とは？要素を傾斜変形させる方法をわかりやすく解説

CSSのskew()関数は、要素を2D平面（二次元空間）上で傾斜変形（スキュー）させるために使用される変換関数です。適用する傾斜の量（角度）は、skew()関数の引数として指定します。

第一引数にはX軸方向の傾斜角度、第二引数にはY軸方向の傾斜角度を指定します。角度の単位には「deg（度）」や「turn（回転）」などが利用できます。

基本構文

transform: skew(X軸の角度, Y軸の角度);

サンプルコード1

以下の例では、画像に対してX軸方向に45度の傾斜を適用しています。あわせてtransform-originプロパティで変形の基準点を左上に設定している点にも注目してください。

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(50px, 10%);
}
.skew_img {
   transform-origin: top left;
   transform: skew(45deg, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

実行結果

CSSのskew()関数とは？要素を傾斜変形させる方法をわかりやすく解説

サンプルコード2

続いて、別の例を見てみましょう。この例では、「turn」単位と「deg」単位を組み合わせて傾斜を指定しています。なお、-0.06turnは約-21.6度に相当します。

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(50px, 10%);
}
.skew_img {
   transform-origin: top left;
   transform: skew(-0.06turn, 18deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

実行結果

CSSのskew()関数とは？要素を傾斜変形させる方法をわかりやすく解説

まとめ

skew()関数を使うことで、要素を簡単に傾けたデザイン表現が可能になります。Y軸方向のみ傾斜させたい場合はskewY()、X軸方向のみの場合はskewX()といった個別の関数も用意されています。また、transform-originプロパティと組み合わせることで、傾斜の基準点を自由に制御できる点も覚えておくと便利です。

  1. CSSのmatrix()関数とは？2D変換行列の使い方をサンプルコードで解説

    CSSのmatrix()関数は、同次2D変換行列（homogeneous 2D transformation matrix）を定義するために使用される関数です。引数には線形変換の値を指定することで、要素に対して拡大縮小・回転・傾斜・移動といった複数の変換を一度に適用できます。 matrix()関数の基本構文 matrix()関数は、以下のように6つの引数を受け取ります。 transform: matrix(a, b, c, d, e, f); 各引数の意味は次のとおりです。 a, d：水平方向・垂直方向の拡大縮小率 b, c：傾斜（スキュー）の度合い e, f：水平方向・垂直方向の移動量（ピ

  2. CSSのtranslate()関数とは？要素を移動させる方法を実例付きで解説

    CSSのtranslate()関数は、要素を水平方向・垂直方向に移動（再配置）するために使用される変換関数です。transformプロパティと組み合わせて使うことで、HTML要素を元の位置から任意の距離だけずらして表示できます。translate()関数の基本構文transform: translate(x軸の移動量, y軸の移動量);第1引数が水平方向（X軸）、第2引数が垂直方向（Y軸）の移動量を表します。値にはpxなどの絶対単位や、%（要素自身のサイズに対する割合）を指定できます。第2引数を省略した場合は、Y方向の移動量は0として扱われます。サンプルコード1：画像を右に50px移動するまず