はじめに

Webサイトでボタンがホバー時に浮き上がったり、カードが回転しながら表示されたり、画像が拡大されるエフェクトを見たことがあるでしょう。これらの視覚的な変形を実現しているのがCSSのtransformプロパティです。

transformプロパティは、要素の移動、回転、拡大縮小、傾斜といった変形を適用できる強力な機能です。レイアウトに影響を与えずに要素を変形できるため、パフォーマンスに優れたアニメーションを実装できます。

本記事では、CSSトランスフォームの基礎から実践的なパターンまで、以下の内容を体系的に解説します。

  • transformプロパティの基本構文と仕組み
  • 2D変形関数（translate、rotate、scale、skew）
  • transform-originによる変形の基準点設定
  • 3D変形の基礎（perspective、rotateX/Y/Z、translateZ）
  • transformとtransitionの組み合わせによるアニメーション
  • パフォーマンス最適化とアクセシビリティ対応

CSSトランスフォームの基本概念

CSSトランスフォームは、要素の座標空間を変更することで視覚的な変形を実現します。重要なのは、トランスフォームが適用された要素は元のレイアウト上の位置を維持するということです。つまり、周囲の要素に影響を与えずに変形できます。

1
2
3
4

.element {
  transform: translateX(100px);
  /* 要素は視覚的に100px右に移動するが、レイアウト上の位置は変わらない */
}

graph LR
    subgraph 通常のレイアウト
        A[元の位置<br>layout box] 
    end
    subgraph トランスフォーム適用後
        B[元の位置<br>layout box<br>透明] --> C[変形後の位置<br>visual rendering]
    end
    style A fill:#e3f2fd
    style B fill:#fff,stroke:#999,stroke-dasharray: 5 5
    style C fill:#e8f5e9

トランスフォームの特性

transformプロパティには以下の重要な特性があります。

特性 説明
レイアウトへの非影響 変形後もドキュメントフローに影響を与えない
スタッキングコンテキスト none以外の値を持つと新しいスタッキングコンテキストを生成
包含ブロック position: fixed/absoluteの子要素の包含ブロックになる
GPU活用 translate、rotate、scaleはGPUアクセラレーションが効きやすい

適用可能な要素

すべてのHTML要素にtransformが適用できるわけではありません。以下の要素には適用できません。

  • インラインボックス（<span>のデフォルト状態など）
  • <col>要素（テーブルカラム）
  • <colgroup>要素

インライン要素にトランスフォームを適用したい場合は、display: inline-blockまたはdisplay: blockに変更する必要があります。

1
2
3
4
5

/* インライン要素にtransformを適用する場合 */
span.transformable {
  display: inline-block;
  transform: rotate(5deg);
}

transformプロパティの構文

基本構文

transformプロパティは、1つ以上の変形関数を指定します。複数の関数を指定する場合はスペースで区切ります。

1
2
3
4
5
6
7
8

/* 単一の変形関数 */
transform: translateX(50px);

/* 複数の変形関数（左から右の順に適用） */
transform: translateX(50px) rotate(45deg) scale(1.2);

/* 変形なし */
transform: none;

変形関数の適用順序

複数の変形関数を指定した場合、左から右の順に適用されます。この順序は結果に大きく影響します。

1
2
3
4
5
6
7
8
9

/* 先に移動してから回転 */
.translate-then-rotate {
  transform: translateX(100px) rotate(45deg);
}

/* 先に回転してから移動（移動方向が回転した軸に沿う） */
.rotate-then-translate {
  transform: rotate(45deg) translateX(100px);
}

graph TD
    subgraph "translateX → rotate"
        A1[原点] -->|"translateX(100px)"| B1[右に移動]
        B1 -->|"rotate(45deg)"| C1[その場で回転]
    end
    
    subgraph "rotate → translateX"
        A2[原点] -->|"rotate(45deg)"| B2[座標軸が回転]
        B2 -->|"translateX(100px)"| C2[斜め方向に移動]
    end

この違いを理解することは、複雑なアニメーションを作成する際に非常に重要です。

2D変形関数

2D変形は、X軸（横方向）とY軸（縦方向）の2次元平面上で要素を変形します。

translate（移動）

translate関数は、要素を指定した距離だけ移動します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* X軸とY軸を同時に指定 */
transform: translate(50px, 100px);

/* X軸のみ */
transform: translateX(50px);

/* Y軸のみ */
transform: translateY(100px);

/* パーセント指定（要素自身のサイズに対する割合） */
transform: translate(50%, -50%);
関数 説明 値
translate(x, y) X軸とY軸に移動 長さ、パーセント
translateX(x) X軸のみ移動 長さ、パーセント
translateY(y) Y軸のみ移動 長さ、パーセント

パーセント値を使用した場合、要素自身のサイズを基準に計算されます。これは、要素を中央揃えする際に非常に便利です。

1
2
3
4
5
6
7
8

/* 要素を親要素の中央に配置 */
.center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 自身の幅と高さの50%分だけ戻すことで中央に配置 */
}

rotate（回転）

rotate関数は、要素を指定した角度だけ回転します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 度数法（最も一般的） */
transform: rotate(45deg);

/* ラジアン */
transform: rotate(0.785rad);

/* グラード */
transform: rotate(50grad);

/* 回転数 */
transform: rotate(0.5turn);

正の値は時計回り、負の値は反時計回りに回転します。

単位 説明 360度相当の値
deg 度数 360deg
rad ラジアン 約6.2832rad（2π）
grad グラード 400grad
turn 回転数 1turn 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 回転のバリエーション */
.rotate-90 {
  transform: rotate(90deg);
}

.rotate-half {
  transform: rotate(0.5turn); /* 180度 */
}

.rotate-negative {
  transform: rotate(-45deg); /* 反時計回り */
}

scale（拡大縮小）

scale関数は、要素を指定した倍率で拡大または縮小します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* X軸とY軸を同じ倍率で */
transform: scale(1.5);

/* X軸とY軸を別々に指定 */
transform: scale(2, 0.5);

/* X軸のみ */
transform: scaleX(2);

/* Y軸のみ */
transform: scaleY(0.5);
関数 説明 値
scale(x, y) XY軸で拡大縮小 数値（倍率）
scale(s) 同じ倍率で拡大縮小 数値（倍率）
scaleX(x) X軸のみ拡大縮小 数値（倍率）
scaleY(y) Y軸のみ拡大縮小 数値（倍率）

値の意味は以下の通りです。

  • 1: 元のサイズ（変化なし）
  • 1より大きい: 拡大
  • 0から1の間: 縮小
  • 負の値: 反転
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 拡大縮小のバリエーション */
.scale-up {
  transform: scale(1.5); /* 1.5倍に拡大 */
}

.scale-down {
  transform: scale(0.5); /* 半分に縮小 */
}

.flip-horizontal {
  transform: scaleX(-1); /* 水平方向に反転 */
}

.flip-vertical {
  transform: scaleY(-1); /* 垂直方向に反転 */
}

skew（傾斜）

skew関数は、要素を指定した角度だけ傾斜させます。

1
2
3
4
5
6
7
8

/* X軸とY軸を同時に傾斜 */
transform: skew(20deg, 10deg);

/* X軸のみ傾斜 */
transform: skewX(20deg);

/* Y軸のみ傾斜 */
transform: skewY(10deg);
関数 説明 効果
skew(x, y) XY軸で傾斜 両方向に歪む
skewX(x) X軸のみ傾斜 水平方向に歪む
skewY(y) Y軸のみ傾斜 垂直方向に歪む 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 傾斜のバリエーション */
.skew-x {
  transform: skewX(15deg);
}

.skew-y {
  transform: skewY(15deg);
}

/* パララレログラム（平行四辺形）を作成 */
.parallelogram {
  transform: skewX(-20deg);
}

skewはボタンやバナーのデザインに斜めのエフェクトを加える際によく使用されます。

transform-originによる基準点の設定

transform-originプロパティは、変形の基準点（原点）を設定します。デフォルトでは要素の中心（50% 50%）が基準点です。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* キーワード指定 */
transform-origin: center;
transform-origin: top left;
transform-origin: bottom right;

/* 長さ/パーセント指定 */
transform-origin: 50% 50%;
transform-origin: 0 0;
transform-origin: 100px 50px;

/* 3D用（z-offset追加） */
transform-origin: 50% 50% 100px;

キーワードとパーセント値の対応

キーワード X軸 Y軸
left 0% -
center 50% 50%
right 100% -
top - 0%
bottom - 100%

回転における基準点の違い

transform-originの設定は、特に回転において顕著な違いを生みます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* デフォルト: 中心を軸に回転 */
.rotate-center {
  transform-origin: center;
  transform: rotate(45deg);
}

/* 左上を軸に回転 */
.rotate-top-left {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* 右下を軸に回転 */
.rotate-bottom-right {
  transform-origin: bottom right;
  transform: rotate(45deg);
}

/* カスタム位置を軸に回転 */
.rotate-custom {
  transform-origin: 20% 80%;
  transform: rotate(45deg);
}

graph LR
    subgraph "center"
        A1[●] -->|回転| B1[中心で回転]
    end
    
    subgraph "top left"
        A2[●左上] -->|回転| B2[左上を軸に回転]
    end
    
    subgraph "bottom right"
        A3[右下●] -->|回転| B3[右下を軸に回転]
    end

実践例：ドアが開くアニメーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* ドアが左端を軸に開くアニメーション */
.door {
  width: 100px;
  height: 200px;
  background: #8b4513;
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.door:hover {
  transform: rotateY(-90deg);
}

3D変形の基礎

CSS トランスフォームは3次元空間での変形もサポートしています。3D変形を使うと、より立体的で没入感のあるエフェクトを作成できます。

perspectiveによる遠近感

perspectiveプロパティは、3D変形に遠近感を与えます。値が小さいほど強い遠近感（激しい変形）、値が大きいほど弱い遠近感（緩やかな変形）になります。

1
2
3
4
5
6
7
8
9

/* 親要素に設定（子要素すべてに適用） */
.container {
  perspective: 1000px;
}

/* または、transform内で個別に設定 */
.element {
  transform: perspective(1000px) rotateY(45deg);
}
設定方法 適用範囲 使用場面
perspectiveプロパティ 子要素すべて 複数要素に統一した遠近感
perspective()関数 その要素のみ 個別の3D効果 
1
2
3
4
5
6
7
8

/* perspectiveの値による違い */
.strong-perspective {
  perspective: 200px; /* 強い遠近感 */
}

.weak-perspective {
  perspective: 2000px; /* 弱い遠近感 */
}

3D回転関数

3D空間での回転には、各軸に対応した関数があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* X軸周りの回転（横軸を中心に縦方向に倒れる） */
transform: rotateX(45deg);

/* Y軸周りの回転（縦軸を中心に横方向に回る） */
transform: rotateY(45deg);

/* Z軸周りの回転（2Dのrotateと同じ） */
transform: rotateZ(45deg);

/* 任意の軸周りの回転 */
transform: rotate3d(1, 1, 0, 45deg);
関数 回転軸 視覚的な動き
rotateX(angle) X軸（水平軸） 前後に倒れる
rotateY(angle) Y軸（垂直軸） 左右に回転
rotateZ(angle) Z軸（画面に垂直） 平面上で回転
rotate3d(x, y, z, angle) 任意の軸 指定した軸で回転

3D移動関数

Z軸方向への移動も可能です。

1
2
3
4
5

/* Z軸方向に移動（手前に近づく/奥に遠ざかる） */
transform: translateZ(100px);

/* 3次元移動 */
transform: translate3d(50px, 100px, 200px);

transform-style：子要素の3D空間

transform-styleプロパティは、子要素が3D空間内でどのように配置されるかを制御します。

1
2
3
4
5
6
7
8

.container {
  perspective: 1000px;
  transform-style: preserve-3d; /* 子要素も3D空間を維持 */
}

.child {
  transform: rotateY(45deg);
}
値 説明
flat 子要素は親の平面上に平坦化される（デフォルト）
preserve-3d 子要素は3D空間を維持する

backface-visibility：裏面の表示

backface-visibilityプロパティは、要素が裏返しになったときに見えるかどうかを制御します。

1
2
3
4

.card {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
値 説明
visible 裏面も表示（デフォルト）
hidden 裏面は非表示

実践例：カードフリップ

1
2
3
4
5
6

<div class="card-container">
  <div class="card">
    <div class="card-front">表面</div>
    <div class="card-back">裏面</div>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.card-front {
  background: #3498db;
  color: white;
}

.card-back {
  background: #e74c3c;
  color: white;
  transform: rotateY(180deg);
}

transformとtransitionの組み合わせ

transformとtransitionを組み合わせることで、スムーズなアニメーション効果を実現できます。

基本的な組み合わせ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button:active {
  transform: translateY(-1px);
}

複数のtransform関数をアニメーション

1
2
3
4
5
6
7
8

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

実践パターン集

以下に、よく使用されるトランスフォームとトランジションの組み合わせパターンを紹介します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

/* パターン1: 浮き上がりエフェクト */
.lift-effect {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* パターン2: 拡大エフェクト */
.grow-effect {
  transition: transform 0.3s ease;
}

.grow-effect:hover {
  transform: scale(1.05);
}

/* パターン3: 回転アイコン */
.rotate-icon {
  transition: transform 0.3s ease;
}

.button:hover .rotate-icon {
  transform: rotate(90deg);
}

/* パターン4: 傾きエフェクト */
.tilt-effect {
  transition: transform 0.3s ease;
}

.tilt-effect:hover {
  transform: rotate(-3deg);
}

/* パターン5: ズームと回転の組み合わせ */
.zoom-rotate {
  transition: transform 0.5s ease;
}

.zoom-rotate:hover {
  transform: scale(1.1) rotate(5deg);
}

/* パターン6: スライドインテキスト */
.slide-text {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.container:hover .slide-text {
  transform: translateX(0);
}

アコーディオンの矢印アニメーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-arrow {
  transition: transform 0.3s ease;
}

.accordion-header.active .accordion-arrow {
  transform: rotate(180deg);
}

ハンバーガーメニューのアニメーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background: #333;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

個別のtransformプロパティ

CSS Transforms Level 2では、transformプロパティのショートハンドに加えて、個別のプロパティが導入されました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 個別プロパティ */
.element {
  translate: 50px 100px;
  rotate: 45deg;
  scale: 1.5;
}

/* 上記は以下と同等 */
.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}
プロパティ 対応する関数 適用順序
translate translate() 1番目
rotate rotate() 2番目
scale scale() 3番目

個別プロパティを使用する利点は以下の通りです。

  1. 独立したアニメーション: 各変形を個別にトランジションできる
  2. コードの可読性: 複雑な変形を分かりやすく記述できる
  3. 上書きの容易さ: 特定の変形だけを変更しやすい
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 個別プロパティで独立したアニメーション */
.element {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: 
    translate 0.3s ease,
    rotate 0.5s ease,
    scale 0.2s ease;
}

.element:hover {
  translate: 20px -10px;
  rotate: 15deg;
  scale: 1.1;
}

注意点として、これらの個別プロパティはtransformプロパティの後に適用されます。順序は常に translate → rotate → scale → transform です。

パフォーマンス最適化

CSSトランスフォームはパフォーマンスに優れていますが、最適な結果を得るためにはいくつかのベストプラクティスがあります。

GPUアクセラレーション

transformとopacityのアニメーションは、ブラウザがGPUで処理できるため、非常に滑らかです。一方、width、height、top、leftなどのプロパティはレイアウトの再計算が必要なため、パフォーマンスが低下します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 推奨: transformを使用 */
.good {
  transition: transform 0.3s ease;
}

.good:hover {
  transform: translateX(100px);
}

/* 非推奨: leftを使用 */
.bad {
  position: relative;
  transition: left 0.3s ease;
}

.bad:hover {
  left: 100px;
}

will-changeプロパティ

will-changeプロパティは、要素に対して間もなく変更が行われることをブラウザに事前に通知します。

1
2
3
4
5
6
7
8

.element {
  will-change: transform;
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.1);
}

ただし、will-changeの過剰使用は逆効果になる可能性があります。本当に必要な場合にのみ使用してください。

パフォーマンスのベストプラクティス

推奨事項 理由
transformとopacityを優先 GPUアクセラレーションが効く
width/heightのアニメーションを避ける レイアウト再計算が発生
will-changeは控えめに メモリ消費が増加する可能性
複雑な変形は要素を分離 レイヤー分離で他要素への影響を軽減

アクセシビリティへの配慮

トランスフォームを使ったアニメーションは、一部のユーザーにとって問題となる場合があります。特に、動きに敏感なユーザーや前庭障害を持つユーザーには、ズームやスケールのアニメーションが不快感を引き起こすことがあります。

prefers-reduced-motionの活用

prefers-reduced-motionメディアクエリを使用して、ユーザーが動きの軽減を希望している場合にアニメーションを無効化または軽減できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.1);
}

/* 動きの軽減を希望するユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
  
  .element:hover {
    transform: none;
  }
}

より洗練されたアプローチとして、動きを完全に無効化するのではなく、軽減することも可能です。

1
2
3
4
5

@media (prefers-reduced-motion: reduce) {
  .element {
    transition-duration: 0.01ms;
  }
}

実践的なUIパターン

ボタンのホバーエフェクト

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.button {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

画像のズームエフェクト

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.image-container {
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

ローディングスピナー

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

ツールチップの表示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.tooltip-container {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 8px 12px;
  background: #333;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-12px);
}

ブラウザサポート

CSSトランスフォームは、すべてのモダンブラウザで広くサポートされています。

機能 Chrome Firefox Safari Edge
2D Transform 36+ 16+ 9+ 12+
3D Transform 36+ 16+ 9+ 12+
transform-origin 36+ 16+ 9+ 12+
個別プロパティ（translate, rotate, scale） 104+ 72+ 14.1+ 104+

古いブラウザをサポートする必要がある場合は、ベンダープレフィックス（-webkit-）を検討してください。ただし、2026年現在ではほとんどの場合プレフィックスは不要です。

まとめ

CSSトランスフォームは、要素を移動、回転、拡大縮小、傾斜させるための強力なツールです。本記事で解説した内容を振り返ります。

  • 2D変形関数: translate、rotate、scale、skewで基本的な変形が可能
  • transform-origin: 変形の基準点をカスタマイズして多彩な効果を実現
  • 3D変形: perspectiveと3D回転関数で立体的なエフェクトを作成
  • transitionとの連携: スムーズなアニメーション効果を簡単に実装
  • パフォーマンス: GPUアクセラレーションにより滑らかな動作を実現
  • アクセシビリティ: prefers-reduced-motionでユーザーの設定を尊重

トランスフォームをマスターすることで、ユーザー体験を向上させる魅力的なインタラクションを実装できます。まずはシンプルなホバーエフェクトから始めて、徐々に複雑なアニメーションに挑戦してみてください。

参考リンク