CSS Transform：回転、拡大縮小、移動、傾斜
CSS Transformプレイグラウンド
CSS Transform：回転、拡大縮小、移動、傾斜、3Dフリップ | We.Inc
スライダーで回転、拡大縮小、移動、傾斜を操作し、CSSとTailwindのクラスをコピーできます。適用の順序、transform-origin、3Dのカードフリップ、滑らかなアニメーションについても解説します。
要素の移動、回転、サイズ変更、傾斜はtransformプロパティで行います：transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg)。関数は右から左へ適用されるため、順序によって結果が変わります。transformは周囲のレイアウトを一切ずらさず、ブラウザーが処理をコンポジターに任せられるので、アニメーションさせても負荷がほとんどかかりません。
4つの2D変形関数
- translate()
- translate(1rem, -50%)
- translate-x-4 -translate-y-1/2
スライダーで変形を組み立てると、カードがその場で反応します。単一のtransformプロパティと、個別のtranslate、rotate、scaleプロパティを切り替えることもできます。さらに下には、基準点のデモ、ホバーで確かめられる3Dフリップ、トランジションのレシピ、そしてtransformは滑らかなのにtopやleftはカクつく理由の解説があります。
- 移動、回転、拡大縮小、傾斜のスライダーをドラッグします。カードが動き、CSSが自動で書き換わります。
- transform-originを選んで、カードが回転したり大きくなったりする間、どの点が固定されるかを確認します。
- まとめて書くtransformのショートハンドと、個別のプロパティを切り替えます。
- CSSまたはTailwindのクラスをコピーし、スタイルシートやマークアップに貼り付けます。
- 絶対配置のボックスを中央に置くには、top: 50%; left: 50%; translate: -50% -50%を使います。translateのパーセンテージは、親ではなく要素自身を基準にします。
- 幅、高さ、上端、左端ではなく、transformとopacityをアニメーションさせましょう。それ以外のプロパティは、フレームごとにレイアウトの再計算を発生させます。
- 360degを超える回転も有効で、アニメーションでは意味があります。0からrotate(720deg)へトランジションすると2回転します。
- will-change: transformは、これからアニメーションする要素にだけ付け、終わったら外しましょう。あちこちに残すとメモリを消費します。
よくある質問
変形関数の順序が重要なのはなぜですか？
各関数は、それより前に書かれた関数の座標系を変えるため、リストは実質的に右から左へ適用されます。translate(100px) rotate(45deg)はボックスを回転させてから真右に動かしますが、rotate(45deg) translate(100px)は回転した斜めの軸に沿って動かします。
transform: rotate()とrotateプロパティの違いは？
rotate、scale、translateの各プロパティは、同じ関数を独立させたものです。個別に設定したりアニメーションさせたりできるので、ホバー時の拡大が別の場所で設定した回転を消してしまうことがありません。ブラウザーはまず移動、次に回転、次に拡大縮小、最後にtransform内の指定を適用します。
transformはレイアウトやほかの要素に影響しますか？
いいえ。要素はレイアウト上で元のボックスを保ち、隣の要素は動きません。変わるのは描画された見た目だけです。ただし、変形された要素は新しいスタッキングコンテキストを作り、固定配置の子孫要素の包含ブロックになるため、モーダルで思わぬ挙動になることがあります。
要素を左右反転するには？
transform: scaleX(-1)か、scaleプロパティでscale: -1 1を使います。要素は基準点（既定では中央）を軸に反転します。裏面が見える3Dフリップにするには、遠近感を設定した親要素の中でY軸を中心に回転させます。
変形したテキストがぼやけるのはなぜですか？
小数の移動量や一部の拡大率では、文字がピクセルの間に配置されるため、特にアニメーション中にぼやけます。移動量を整数ピクセルに丸め、小さい状態から拡大するのではなく最終サイズに合わせて縮小するようにすると、たいていくっきりします。
変形リストの読み方
- 役立つ考え方：最後の関数から始めて最初へとさかのぼり、そのつど、すでに変形された現在の座標系の中で要素を移動、回転、伸縮させていくと考えます。結果がおかしいと感じたら、リストを逆にすると直ることがよくあります。
- translate()内のパーセンテージは、要素自身のボーダーボックスを基準にします。だからこそ、translate(-50%, -50%)で、事前にサイズがわからないボックスを中央に置けるのです。
transformのアニメーションが滑らかな理由
- ブラウザーはページを、スタイル、レイアウト、ペイント、コンポジットという段階でレンダリングします。上端の位置や幅を変えると、その要素と、多くの場合その周囲のレイアウトが再計算されます。transformやopacityの変更は、たいていコンポジットの段階まで直接進められ、すでに描画済みのレイヤーをGPU上で動かすだけで済みます。
- モーションのガイドラインがこの2つのプロパティを繰り返し推奨するのは、このためです。アニメーションのフレームが落ちる場合は、ブラウザーのパフォーマンスパネルを開き、各フレーム内のレイアウトやペイントの処理を探しましょう。
3Dをひと言で
- 親要素にたとえば800pxの遠近感を設定すると、X軸やY軸で回転した子要素が奥へ遠ざかって見えます。値が小さいほど奥行きが強調されます。transform-style: preserve-3dを使うと入れ子の子要素が同じ3D空間を共有し、backface-visibility: hiddenを使うと裏を向いた面が隠れます。これがあらゆるカードフリップの核心です。
すべての変形関数
2Dと3Dの変形関数と対応するTailwindユーティリティ
- 関数
- 働き
- Tailwind（注記がなければv3とv4）
- translate(x, y)
- X方向とY方向に移動する
- translate-x-4, -translate-y-2, translate-x-[13px]
- translateX() / translateY()
- 1つの軸に沿って移動する
- translate-x-1/2, translate-y-full
- translateZ(z)
- 見る人に近づく、または遠ざかる方向に移動する（遠近感が必要）
- translate-z-4（v4）
- rotate(a)
- 角度の分だけ時計回りに回転する（deg、turn、rad）
- rotate-45, -rotate-12, rotate-[17deg]
- rotateX(a) / rotateY(a)
- 3D空間で水平軸または垂直軸を中心に傾ける
- rotate-x-45, rotate-y-180（v4）
- scale(s) / scale(x, y)
- 拡大または縮小する。負の値で反転
- scale-110, scale-x-75, -scale-x-100
- skew(x, y) / skewX() / skewY()
- 要素を傾ける
- skew-x-6, -skew-y-3
- matrix(a, b, c, d, e, f)
- すべての2D変形を1つの行列で表す
- 任意値：[transform:matrix(...)]
- perspective(d)
- この要素だけに奥行きを与える
- 親要素にperspective-[800px]（v4）
適用の順序
同じ2つの関数でも、順序が違えばボックスの位置が変わります。どちらの青いボックスも同じ位置から始まります。
移動してから回転、回転してから移動
1つ目のボックスでは、画面のX軸に沿って移動します。2つ目では回転した軸に沿って移動するため、ボックスはより下の位置に行き着きます。
個別のプロパティは互いを上書きしない
ホバーのルールはscaleだけを変更するので、基本ルールで設定した回転はそのまま残ります。transformのショートハンドでは、:hoverの中でrotate(-3deg)を繰り返し書く必要があります。
同じ回転、3つの基準点
基準点とは、固定されたままになる点です。既定は中央で、左上にすると、角にある蝶番のようにボックスが扉のように開きます。
3Dカードフリップ
ホバーまたはフォーカスで裏返す（CSSのみ）
ラッパーの遠近感で奥行きを出し、preserve-3dで両面を1つの3D空間に保ち、backface-visibilityで裏を向いた面を隠します。動きを減らす設定のユーザーには、即座に切り替わる表示になります。
transformとトランジションを組み合わせる
カードやボタンをホバーで浮かせる
変化するのはtransformとbox-shadowだけで、動きを減らしたいと設定している読者には移動がオフになります。
Tailwindで同じことをする
motion-safe:を付けると、読者が動きの軽減を求めていない場合にのみホバー時の移動が適用されます。
アニメーションの負荷が低いもの
プロパティの変更で発生するレンダリング処理（一般的なブラウザーの挙動）
- transform, translate, rotate, scale
- なし
- なし（通常）
- あり
- background-color, color, box-shadow
- なし
- あり
- なし
- width, height, top, left, margin
- あり
- あり
- なし
（変形なし）
Transformプレイグラウンド
出力形式
transformショートハンド
個別プロパティ
リセット
カード
破線の枠：レイアウト上でカードがある位置。黒い点：transform-origin。
CSSをコピー
Tailwindのクラス
クラスをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る