CSS Transform プロパティ チートシートとサンプルコード

このチートシートは、ウェブデザイナーやフロントエンド開発者がCSS transform プロパティを効果的に活用するためのクイックリファレンスガイドです。

translate, scale, rotate, skew といった基本的な変形操作から、より複雑な translate3d, scale3d, rotate3d を用いた3D変形まで、ウェブエレメントに対する動的なビジュアルエフェクトの適用方法を網羅しています。

また、transform-origin や perspective などの特殊な使用例も含め、各関数の実用的なサンプルコードを提供しており、直感的なインタラクティブ体験や魅力的なアニメーションの実装に役立ちます。

このチートシートを手元に置いて、日々のデザインやコーディングをスムーズに進めましょう。

基本的な変形

移動（Translate）

transform: translate(X, Y);

要素を水平方向（X軸）と垂直方向（Y軸）に移動させます。

/* X軸に100px, Y軸に50px 移動 */
.transform-translate {
  transform: translate(100px, 50px);
}

拡大縮小（Scale）

transform: scale(X, Y);

要素のサイズを水平方向（X軸）と垂直方向（Y軸）に変更します。

/* X軸に100px, Y軸に50px 移動 */
.transform-translate {
  transform: translate(100px, 50px);
}

回転（Rotate）

transform: rotate(angle);

要素を指定した角度で回転させます。

/* 45度回転 */
.transform-rotate {
  transform: rotate(45deg);
}

傾斜（Skew）

transform: skew(X-angle, Y-angle);

要素をX軸とY軸に沿って傾斜させます。

/* X軸に30度、Y軸に20度傾ける */
.transform-skew {
  transform: skew(30deg, 20deg);
}

複合的な変形

複数の変形の組み合わせ

transform: translate(X, Y) scale(X, Y) rotate(angle) skew(X-angle, Y-angle);

上記の変形を組み合わせて一度に適用できます。

/* 100px右に移動し、50%拡大して、30度回転 */
.transform-combined {
  transform: translate(100px) scale(1.5) rotate(30deg);
}

3D変形

3D 移動（Translate3d）

transform: perspective(n);

要素を3次元空間で移動させます。

/* X軸に100px, Y軸に50px, Z軸に200px 移動 */
.transform-translate3d {
  transform: translate3d(100px, 50px, 200px);
}

3D 拡大縮小（Scale3d）

transform: scale3d(X, Y, Z);

要素を3次元空間で拡大縮小します。

/* X軸方向に2倍、Y軸方向に半分、Z軸方向に3倍に拡大 */
.transform-scale3d {
  transform: scale3d(2, 0.5, 3);
}

3D 回転（Rotate3d）

transform: rotate3d(X, Y, Z, angle);

要素を3次元の任意の軸周りで回転させます。

/* X軸周りに45度回転 */
.transform-rotate3d {
  transform: rotate3d(1, 0, 0, 45deg);
}

特別なキーワード

原点の設定（Transform-origin）

transform-origin: X-axis Y-axis;

変形の原点を設定します。

/* 変形の原点を左下に設定 */
.transform-origin {
  transform-origin: left bottom;
}

透視（Perspective）

transform: perspective(n);

3D変形における視点の距離を設定します。

/* 透視距離を600pxに設定 */
.transform-perspective {
  transform: perspective(600px) rotateY(45deg);
}

まとめ

CSSのtransformプロパティは、ウェブエレメントに対して多様な視覚的変形を適用する強力な手段を提供します。移動（translate）、拡大縮小（scale）、回転（rotate）、傾斜（skew）の基本的な変形から、これらを組み合わせた複合変形、さらには3D空間での変形（translate3d, scale3d, rotate3d）まで、多彩な効果を実現することができます。

変形の原点を指定するtransform-originや、3D変形における視点の深さを設定するperspectiveを使うことで、さらにコントロールの幅を広げることが可能です。これらの機能はアニメーションやトランジションと組み合わせることで、ユーザーに滑らかでダイナミックなインタラクティブ体験を提供します。

チートシートとサンプルコードを活用することで、ウェブ開発者はtransformプロパティの基本から応用までを迅速に参照し、日々のデザイン作業を効率化することができます。プロジェクトに応じて適切なtransformを選択し、ブラウザ間の互換性やパフォーマンスにも注意を払いながら、クリエイティブなレイアウトとインタラクションを設計するための基盤となるでしょう。

Favorite