transform

アニメーション・エフェクト

要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。

構文

Syntax

transform: <transform-function>

コード例

例 1

.hover-lift {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

実行結果

ホバー時の浮き上がり効果

ホバーして浮き上がり

💡 カードやボタンのインタラクション効果に最適

ホバー時の浮き上がり効果 - カードやボタンによく使用

例 2

.zoom-in {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

実行結果

ズームイン効果

ZOOM

💡 画像ギャラリーやアイコンの拡大表示に使用

ズームイン効果 - 画像や要素の拡大表示

例 3

.rotate-icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

実行結果

アイコンの回転

→

ホバーで90度回転

💡 矢印やメニューアイコンの状態変更に最適

アイコンの回転 - 矢印やメニューアイコンの状態変更

例 4

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

実行結果

完全中央配置

中央配置

💡 absolute要素の完全中央揃えに必須のテクニック

完全中央配置 - absolute要素の中央揃え

例 5

.flip-card {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

実行結果

3D回転効果

FRONT

BACK

💡 カードフリップアニメーションや3D効果に使用

3D回転効果 - カードフリップアニメーション

例 6

.skew-text {
  transform: skew(-15deg, 0);
  display: inline-block;
}

実行結果

斜体変形効果

SKEW TEXT

💡 動的なテキスト効果やロゴデザインに使用

斜体変形 - 動的なテキスト効果

💡 TIPS

GPUアクセラレーションが効くため、アニメーションパフォーマンスが良い。

ブラウザサポート

IE9+, 全モダンブラウザ

transform

構文

コード例

例 1

例 2

例 3

例 4

例 5

例 6

💡 TIPS

関連プロパティ

ブラウザサポート