CSS transform とは？

transform プロパティを使うと、ドキュメントのレイアウトを崩さずに、要素を視覚的に移動・回転・拡縮・傾斜させることができます。トランスフォームはGPUアクセラレーション対応で、アニメーションとの相性も抜群です。

CSS Transformジェネレーター

スライダーを動かしてリアルタイムでトランスフォームを調整し、CSSをコピーボタンで即座にコードを取得できます。

プリセット：

移動 (Translate)
0px
0px
  <div class="ctgja-section-title">回転 (Rotate)</div>
  <div class="ctgja-row">
    <label for="ctgja-rot">回転角度</label>
    <input type="range" id="ctgja-rot" min="-360" max="360" value="0" step="1" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-rot-val">0deg</span>
  </div>

  <div class="ctgja-section-title">拡縮 (Scale)</div>
  <div class="ctgja-row">
    <label for="ctgja-sx">X軸拡縮</label>
    <input type="range" id="ctgja-sx" min="0" max="3" value="1" step="0.01" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-sx-val">1.00</span>
  </div>
  <div class="ctgja-row">
    <label for="ctgja-sy">Y軸拡縮</label>
    <input type="range" id="ctgja-sy" min="0" max="3" value="1" step="0.01" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-sy-val">1.00</span>
  </div>

  <div class="ctgja-section-title">傾斜 (Skew)</div>
  <div class="ctgja-row">
    <label for="ctgja-skx">X軸傾斜</label>
    <input type="range" id="ctgja-skx" min="-60" max="60" value="0" step="1" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-skx-val">0deg</span>
  </div>
  <div class="ctgja-row">
    <label for="ctgja-sky">Y軸傾斜</label>
    <input type="range" id="ctgja-sky" min="-60" max="60" value="0" step="1" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-sky-val">0deg</span>
  </div>

  <div class="ctgja-section-title">遠近感 (Perspective)</div>
  <div class="ctgja-perspective-row">
    <input type="checkbox" id="ctgja-persp-en" onchange="ctgjaUpdate()">
    <label for="ctgja-persp-en">遠近感を有効化</label>
  </div>
  <div class="ctgja-row">
    <label for="ctgja-persp">奥行き距離</label>
    <input type="range" id="ctgja-persp" min="100" max="2000" value="600" step="10" oninput="ctgjaUpdate()">
    <span class="ctgja-val" id="ctgja-persp-val">600px</span>
  </div>
</div>

<div class="ctgja-preview-panel">
  <div>
    <div class="ctgja-preview-label">ライブプレビュー</div>
    <div class="ctgja-preview-box">
      <div class="ctgja-subject" id="ctgja-subject">ボックス</div>
    </div>
  </div>
  <div>
    <div class="ctgja-preview-label">生成されたCSS</div>
    <div class="ctgja-output" id="ctgja-output"><span class="ctgja-prop">transform</span>: <span class="ctgja-val-text">none</span>;</div>
  </div>
  <div class="ctgja-btn-row">
    <button class="ctgja-btn ctgja-btn-primary" onclick="ctgjaCopy()">CSSをコピー</button>
    <button class="ctgja-btn ctgja-btn-secondary" onclick="ctgjaApplyPreset('reset')">すべてリセット</button>
  </div>
  <div class="ctgja-copy-notice" id="ctgja-copy-notice"></div>
</div>

トランスフォーム関数の解説

関数構文説明
translate()translate(x, y)要素をX・Y軸方向に移動
rotate()rotate(deg)正の値で時計回り、負の値で反時計回りに回転
scale()scale(x, y)要素を拡縮。1が原寸、-1で反転
skew()skew(xdeg, ydeg)各軸に沿って要素を傾斜
perspective()perspective(px)3D空間の奥行き感を設定

トランスフォームの順序に注意

複数のトランスフォームは右から左の順に適用されます。translate(50px, 0) rotate(45deg) は「まず回転してから移動」という意味になります。順序を変えると見た目が変わるので注意が必要です。

パフォーマンスのコツ

  • アニメーションには transform と opacity を優先的に使用してください — レイアウトと描画の処理をスキップできます。
  • 頻繁にアニメーションする要素には will-change: transform を追加しましょう。
  • 静的な要素への will-change の多用は GPUメモリを消費するため避けてください。

3D トランスフォームのサンプル

/* 親要素で3D空間を設定 */
.container {
  perspective: 600px;
}

/* 子要素に3D変換を適用 */
.card {
  transform: rotateY(30deg) rotateX(10deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

関連ツール

freee会計で経理をもっとスマートに

個人事業主・フリーランスの方に。確定申告・請求書・経費管理をクラウドで一元化。面倒な帳簿付けを自動化して、本業に集中しましょう。

freeeを無料で試す