← カテゴリ一覧に戻る

変形（拡大・縮小・回転・移動）

transformscalerotatetranslateskewmatrixperspective

CSSのtransformプロパティは、要素を移動・拡大縮小・回転・傾斜させます。レイアウトフローに影響を与えず、GPUで処理されるためパフォーマンスが高いです。

デモ：transform 関数一覧（ホバーで確認）

X軸移動
translateX(20px)
Y軸移動
translateY(-15px)
拡大
scale(1.3)
縮小
scale(0.7)
回転
rotate(30deg)
X傾斜
skewX(15deg)
Y傾斜
skewY(10deg)
水平反転
scaleX(-1)

デモ：3D カードフリップ（ホバー）

表面 😊
裏面 🎉

rotateY(180deg) + backface-visibility: hidden

3D回転

rotateX() + rotateY() 組み合わせ

デモ：transform-origin の違い（ホバーで回転）

top left
左上を軸に回転
center（デフォルト）
中心を軸に回転
bottom right
右下を軸に回転

コード例

/* 基本的な transform 関数 */
.move    { transform: translate(50px, 20px); }
.move-x  { transform: translateX(50px); }
.move-y  { transform: translateY(-20px); }

.big     { transform: scale(1.5); }
.stretch { transform: scaleX(2) scaleY(0.5); }

.spin    { transform: rotate(45deg); }
.slant   { transform: skew(15deg, 5deg); }

/* 複数の変形を組み合わせる（右から左の順で適用） */
.combined {
  transform: translateY(-10px) scale(1.1) rotate(5deg);
}

/* transform-origin — 変形の基点 */
.origin-custom { transform-origin: top left; }
.origin-percent { transform-origin: 25% 75%; }
.origin-px { transform-origin: 10px 20px; }

/* 3D transform */
.scene { perspective: 600px; } /* 親要素に設定 */
.card {
  transform-style: preserve-3d; /* 子の3D変形を維持 */
  backface-visibility: hidden;  /* 裏面を非表示 */
  transform: rotateY(180deg);
  transform: rotateX(30deg) rotateY(45deg);
  transform: rotate3d(1, 1, 0, 30deg); /* x,y,z軸ベクトル + 角度 */
}

/* 行列変換（高度な使用） */
/* matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */
.matrix { transform: matrix(1, 0.2, 0, 1, 10, 0); }

NEW個別 transform プロパティ：scale / rotate / translate（2022）

従来は transform: scale(1.2) rotate(45deg) のように一つの transform に全部書く必要がありました。 これを個別プロパティに分離できるようになり、トランジション・アニメーションの管理が格段に楽になりました。

scale: 1.3
scaleのみ
rotate: 45deg
rotateのみ
translate: 20px -10px
translateのみ
/* 従来の書き方 — scaleだけ変えたくても全部書き直しが必要 */
.old {
  transform: translateY(-10px) scale(1) rotate(0deg);
  transition: transform 0.3s ease;
}
.old:hover {
  transform: translateY(-10px) scale(1.2) rotate(0deg); /* translateY も維持が必要 */
}

/* 新しい個別プロパティ (Chrome 104+, Firefox 110+, Safari 14.1+) */
.new {
  translate: 0 -10px;
  scale: 1;
  rotate: 0deg;

  /* それぞれ独立してトランジション可能！ */
  transition: scale 0.3s ease, rotate 0.5s ease-in-out;
}
.new:hover {
  scale: 1.2;     /* translateには影響しない */
  rotate: 15deg;
}

/* 適用順序: translate → rotate → scale（transform shorthandとは逆順） */
.note {
  translate: 50px 0;  /* まず移動 */
  rotate: 45deg;      /* 次に回転 */
  scale: 1.2;         /* 最後に拡大 */
}

Chrome 104+, Firefox 110+, Safari 14.1+ で全ブラウザ対応済み。新しいプロジェクトでは積極的に使いましょう。

比較：transform: translate() vs position: absolute

観点transform: translate()position: absolute
レイアウトへの影響✅ 影響なし（元の場所を確保したまま移動）❌ レイアウトフローから外れる
パフォーマンス✅ GPU合成層で高速処理⚠️ リフロー・リペイントが発生する可能性
アニメーション適性✅ 最適（60fps維持しやすい）❌ top/left アニメーションは重い
基準点自身の元の位置最近接の position 祖先
使いどころホバーエフェクト、アニメーションオーバーレイ、絶対配置が必要な場合

🤖 AIプロンプトテンプレート

CSSのtransformプロパティを使った変形エフェクトの実装例をReact + Tailwind CSSで作成してください。

要件:
- translate / scale / rotate / skew の各関数を視覚的に確認できるデモ（ホバーで変形）
- transform-origin の違い（top left / center / bottom right）をホバーで比較するデモ
- 3Dカードフリップ（rotateY + backface-visibility: hidden + perspective）の実装
- 個別プロパティ（translate / scale / rotate）を使った独立したトランジション管理の実装
- ホバーで複数のtransformを組み合わせるインタラクティブなカードUIコンポーネント
- transform: translate(-50%, -50%)を使った絶対位置での中央配置パターン

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo