0Pricing
CSS Academy · レッスン

変換の原点とPerspective

transform-originで変換の支点を変更し、perspectiveで奥行きを加えます。

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

transform-origin のデフォルト

デフォルトでは、変形は要素の中心点を基準に行われます。中心点は 50% 50% です。transform-origin プロパティでこの支点を変更できます。

transform-origin の設定

キーワード、パーセンテージ、長さを指定できます。形式は x-axis y-axis z-axis です。

  <div class="spinning-logo">Logo</div>
  <div class="page-fold">Fold</div>
  <div class="tooltip">Info</div>

scale と transform-origin

左上隅を基準に拡大・縮小します（ドロップダウンを展開するアニメーションに便利です）。

  <div class="dropdown open">Dropdown menu</div>

回転と transform-origin

時計の針を根元を中心に回転させます。

  <div class="clock"><div class="hand"></div></div>

perspective プロパティ

perspective は、3D 変形におけるユーザーと z=0 平面の距離を設定します。値を小さくすると遠近感による歪みが強くなり、値を大きくすると奥行きが控えめになります。

  <div class="scene"><div class="card">A</div></div>
  <div class="scene-wide"><div class="card">B</div></div>

perspective-origin

遠近感の消失点を変更します。デフォルトは中央（50% 50%）です。

  <div class="scene"><div class="card">Card</div></div>

関数としての perspective

perspective() は、親要素ではなく要素自身に transform 関数として使用することもできます。これにより、3D コンテキストをその要素だけに限定できます。

  <div class="card">Card</div>

transform-style: preserve-3d

デフォルトでは、子要素の 3D 変形は 2D に平坦化されます。親要素に transform-style: preserve-3d を設定すると、子要素の 3D 位置を維持できます。

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

カード反転効果

perspective と preserve-3d を使った、典型的な反転カードです。

  <div class="card-wrapper">
    <div class="card"><div class="card-back">Back</div></div>
  </div>
  <div class="card-wrapper">
    <div class="card flipped"><div class="card-back">Back (flipped)</div></div>
  </div>

backface-visibility

backface-visibility: hidden は、3D 変形された要素の裏面を非表示にします。裏面が表面越しに見えないようにする必要がある反転カードで不可欠です。

perspective と origin の組み合わせ

カーソルの位置に反応する、印象的な 3D ホバー傾斜効果です。

  <div class="card demo-active">3D Tilt Card</div>

確認問題

ドロップダウンを非表示にするために transform: scaleY(0)、表示するために scaleY(1) を使用しています。上から下に向かって展開するには、どの transform-origin を設定しますか。

まとめ

transform-origin は回転や拡大・縮小の支点を変更します。ドロップダウンの展開、時計の針、ホバー時の傾斜などで重要です。親要素に perspective を設定すると、3D の奥行きコンテキストを作成できます。transform-style: preserve-3d は、入れ子になった 3D 要素を有効にします。backface-visibility: hidden は、反転効果で要素の裏面を非表示にします。

よくある質問

「変換の原点とPerspective」レッスンは無料ですか？

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

「変換の原点とPerspective」で何を学びますか？

transform-originで変換の支点を変更し、perspectiveで奥行きを加えます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「変換の原点とPerspective」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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