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

CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。

主な2D変換関数の一覧

以下に、よく使用される代表的な2D変換関数をまとめました。

番号	関数と説明
1	matrix(n,n,n,n,n,n) 6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。
2	translate(x,y) 要素をX軸方向とY軸方向に移動します。
3	translateX(n) 要素をX軸方向（水平方向）にのみ移動します。
4	translateY(n) 要素をY軸方向（垂直方向）にのみ移動します。
5	scale(x,y) 要素の幅と高さを拡大または縮小します。
6	scaleX(n) 要素の幅（横方向）のみを拡大または縮小します。
7	scaleY(n) 要素の高さ（縦方向）のみを拡大または縮小します。
8	rotate(angle) 指定した角度で要素を回転させます。正の値で時計回り、負の値で反時計回りです。
9	skew(x-angle,y-angle) X軸とY軸に沿って要素を傾斜させます。
10	skewX(angle) X軸方向にのみ要素を傾斜させます。
11	skewY(angle) Y軸方向にのみ要素を傾斜させます。

2D変換関数のコード例

次のコードは、CSS3における2D変換関数（rotate・skew・scale・translate）の実際の使用例を示しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 100px;
    height: 100px;
    background-color: rgb(98, 0, 255);
    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 transform functions</h1>
<div class="rotate">ROTATE</div>
<div class="skew">
SKEW
</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。それぞれのボックスが、回転・傾斜・拡大・移動の効果を受けて表示されているのが確認できます。

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

まとめ

2D変換関数を使いこなすことで、HTML要素の位置や形状をCSSだけで柔軟に操作できます。transformプロパティは複数の関数を組み合わせることも可能なので、transform: translate(30px, 20px) rotate(20deg); のように記述すれば、移動と回転を同時に適用することもできます。ぜひ実際のWeb制作で活用してみてください。

CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

CSS3でボックスシャドウとテキストシャドウ効果を作成する方法

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
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