CSS transform とは？
transform プロパティを使うと、ドキュメントのレイアウトを崩さずに、要素を視覚的に移動・回転・拡縮・傾斜させることができます。トランスフォームはGPUアクセラレーション対応で、アニメーションとの相性も抜群です。
CSS Transformジェネレーター
スライダーを動かしてリアルタイムでトランスフォームを調整し、CSSをコピーボタンで即座にコードを取得できます。
プリセット：
移動 (Translate)
0px
0px
回転 (Rotate)
0deg
拡縮 (Scale)
1.00
1.00
傾斜 (Skew)
0deg
0deg
遠近感 (Perspective)
600px
ライブプレビュー
ボックス
生成されたCSS
transform: none;
トランスフォーム関数の解説
| 関数 | 構文 | 説明 |
|---|---|---|
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;
}
関連ツール
- CSSアニメーションジェネレーター — キーフレームアニメーションをビジュアルで作成
- CSS Flexboxジェネレーター — フレックスレイアウトをライブプレビューで設計
- CSS ボックスシャドウジェネレーター — 多層シャドウをインタラクティブに作成