0Pricing
CSS Academy · レッスン

3D変換：rotateX、rotateY、translateZ

3D CSS変換関数を使って、3次元空間で要素を回転・移動します。

「3D変換：rotateX、rotateY、translateZ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

3D 変形の概要

CSS の 3D 変形は、Z 軸を使って 2D の仕組みを 3 つ目の次元に拡張します。親要素に perspective を設定し、入れ子になった 3D 要素には transform-style: preserve-3d を設定して 3D を有効にします。

rotateX()

rotateX(angle) は、水平な X 軸を中心に要素を回転させます。ページを手前や奥にめくるような動きです。

  <div class="page"><div class="leaf">Leaf</div></div>

rotateY()

rotateY(angle) は、垂直な Y 軸を中心に要素を回転させます。ドアを蝶番で回転させるような動きです。

  <div class="card-flip demo-active"><div class="card">Card</div></div>

rotateZ()

rotateZ(angle) は 2D の rotate() 関数と同じで、画面の平面上で回転させます。

rotate3d()

rotate3d(x, y, z, angle) は、カスタム 3D 軸ベクトルを中心に回転させます。x、y、z の値で軸の方向を定義します。

  <div class="element">3D</div>

translateZ()

translateZ() は、Z 軸に沿って要素を閲覧者に近づけたり遠ざけたりします。正の値では近づき、負の値では遠ざかります。

  <div class="scene-z">
    <div class="layer-front">Front</div>
    <div class="layer-back">Back</div>
  </div>

translate3d()

translate3d(x, y, z) は、3 つすべての軸に沿って要素を同時に移動させます。translateZ(0) を使用すると GPU レイヤーへの昇格を強制できます（一般的なパフォーマンスハックです）。

  <div class="animated">GPU layer</div>

scale3d()

scale3d(x, y, z) は、3 次元で拡大・縮小します。scaleZ() は奥行きを拡大・縮小するため、3D キューブの面などに便利です。

3D キューブの例

6 つの面に 3D 変形を適用してキューブを作成します。

  <div class="cube-scene">
    <div class="cube">
      <div class="cube-face front">Front</div>
      <div class="cube-face back">Back</div>
      <div class="cube-face left">Left</div>
      <div class="cube-face right">Right</div>
      <div class="cube-face top">Top</div>
      <div class="cube-face bottom">Bottom</div>
    </div>
  </div>

パララックス 3D 効果

子要素に translateZ を使用すると、スクロール可能な 3D シーンに奥行きを作り出せます（CSS パララックス）。

  <div class="parallax-scene">
    <div class="far-layer">Far layer</div>
    <div class="close-layer">Close layer</div>
  </div>

ハードウェアアクセラレーション

3D 変形は、translateZ(0) のような単純なものでも、要素を専用の GPU レイヤーに移します。これによりアニメーション中の描画を防げますが、GPU メモリを使用します。一律のハックとしてではなく、意図して使用してください。

確認問題

要素を Z 軸に沿って（閲覧者に近づけたり遠ざけたり）移動させる transform 関数はどれですか。

まとめ

3D CSS 変形では、各軸を中心とした回転に rotateX/Y/Z() を、奥行き方向の移動に translateZ() を使用します。親要素に perspective を設定し、transform-style: preserve-3d を指定すると真の 3D を有効にできます。反転効果には backface-visibility: hidden を使用します。3D 変形は GPU レイヤーへの昇格を行うため、スムーズなアニメーションを実現できます。

よくある質問

「3D変換：rotateX、rotateY、translateZ」レッスンは無料ですか？

はい。「3D変換：rotateX、rotateY、translateZ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「3D変換：rotateX、rotateY、translateZ」で何を学びますか？

3D CSS変換関数を使って、3次元空間で要素を回転・移動します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「3D変換：rotateX、rotateY、translateZ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Translate、Rotate、Scale
  2. SkewとMatrix変換
  3. 変換の原点とPerspective
  4. 3D変換：rotateX、rotateY、translateZ
← CSS Academyに戻る