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

CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方

CSSの2D変換関数は、要素に対して回転・移動・拡大縮小・傾斜といった2次元の変換効果を適用するために使用されます。これらの関数を活用することで、JavaScriptなどに頼らずCSSだけで動きのあるデザインやアニメーション表現を手軽に実装できます。

主な2D変換関数の一覧

  • translate() － 要素をX軸・Y軸方向に移動させます。

  • scale() － 要素をX軸・Y軸方向に拡大または縮小します。

  • rotate() － 要素を指定した角度だけ回転させます。

  • skew() － 要素をX軸・Y軸方向に傾斜させます。

各関数の基本構文

  • translate(x, y)：指定した距離（px など）だけ要素を移動
  • scale(x, y)：指定した倍率で要素を拡大・縮小（1が基準）
  • rotate(angle)：deg 単位で角度を指定して回転
  • skew(x-angle, y-angle)：指定した角度で要素を傾斜

これらの関数は transform プロパティに値として指定します。以下は、CSSで2D変換関数を使用した具体的なコード例です。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 128);
    border:2px solid rgb(0, 35, 150);
    margin: 20px;
    display: inline-block;
    color: white;
}
.rotate {
    transform: rotate(20deg);
}
.translate {
    transform: translate(30px, 20px);
}
.scale {
    transform: scale(2, 1);
    margin-left:70px;
}
.skew {
    transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D変換関数のサンプル</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>

実行結果

上記のコードを実行すると、それぞれの変換関数が適用された4つのボックスが表示され、回転・傾斜・拡大・移動の違いをひと目で確認できます。

CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方

  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t