CSSの視点の仕組み

CSSアニメーション愛好家は、多くの場合、強力な視点を使用します。パースペクティブプロパティ自体は3D効果を達成できませんが（ベース形状には深さがないため）、 transformプロパティを使用して3D空間（x、y、z軸）のオブジェクトを移動および回転させ、視点を使用して深さを制御できます。

この記事は、基本から始まり、視点の概念を徐々に説明し、最後に完全な3D回転キューブアニメーションを作成します。

視点の基本

シンプルな緑色の正方形から始めて、3つの軸に移動します。

x軸とy軸にオブジェクトを移動するのは非常に単純ですが、z軸に移動すると、正方形が同じままであるように見えます。これは、オブジェクトがz軸上で移動すると、アニメーションが私たちに近づき、次に私たちから離れますが、正方形のサイズ（および位置）が同じままであるためです。これは、CSS perspective属性が作用する場所です。

オブジェクトがx軸またはy軸上で移動する場合、視点は効果がありませんが、視点は正方形が私たちに近づいているときに大きく見えるようにし、私たちから遠く離れているときは小さくなります。はい、実際の生活のように。

オブジェクトを回転させるときにも同じ効果が発生します。

Z軸上の正方形を回転させると、私たち全員がよく知っている定期的な回転と愛のように見えますが、XまたはY軸の正方形を回転させると（視点を使用せずに）、回転するのではなく、正方形が小さくなる（または狭くなる）ように見えます。しかし、視点を追加すると、正方形が回転すると、正方形の近くが大きく見えると、遠い側が小さくなり、回転が期待どおりに見えることがわかります。

オブジェクトがxまたはy軸（または270°、450°、630°など）で90°の角度で回転すると、視界から「消える」ことがあります。繰り返しますが、これはオブジェクトに深さを追加できず、この位置では正方形の幅（または高さ）が実際に0になるためです。

視点値

値を使用して、 perspectiveプロパティを設定する必要があります。この値は、オブジェクト平面の距離、つまり視点の強度を設定します。値が大きいほど、オブジェクトから遠くなります。値が小さいほど、視点効果が明らかになります。

起源の視点

perspective-originプロパティは、「観察」オブジェクトの方向を決定します。オリジンが中央に配置され（これがデフォルト）、オブジェクトが右に移動すると、左から見ているように見えます（逆も同様です）。

または、オブジェクトを中央に配置して、 perspective-origin移動することもできます。起源が側面に設定されているとき、それはあなたがその側からオブジェクトを「観察」するようなものです。値が大きいほど、中心から外を見ることができます。

変身

perspectiveとperspective-originが要素の親コンテナに設定され、消失点の位置（つまり、オブジェクトをオブジェクト平面に「観察」する距離）を決定しますが、オブジェクトの変位と回転は、オブジェクト自体で宣言されたtransformプロパティを使用して設定されます。

前の例からコードを見ると、正方形を片側から他方に移動すると、 translateX()関数を使用していることがわかります - これはx軸に沿って移動したいので理にかなっています。ただし、 transformプロパティに割り当てられていることに注意してください。この関数は、変換する要素に直接適用される変換タイプですが、その動作は親要素に割り当てられた視点ルールに適合します。

複数の関数を「リンク」してプロパティをtransformできます。しかし、複数の変換を使用する場合、考慮すべき3つの非常に重要なことがあります。

1. オブジェクトが回転すると、その座標系はオブジェクトとともに変化します。
2. オブジェクトを翻訳すると、それは（親座標ではなく）独自の座標系に対して移動します。
3. これらの値が書かれた変更（およびする）順序は、最終結果を変更します。

前のデモで望んでいた効果を得るには、まずx軸の正方形を翻訳する必要があります。そうして初めて、私はそれをスピンすることができます。これを逆の順序で行う場合（最初に回転してから翻訳）、結果は完全に異なります。

プロパティtransformための価値順序の重要性を強調するために、いくつかの簡単な例を見てみましょう。第一に、それは2つの正方形の単純な2次元（2D）変換であり、どちらも同じ変換値を持っていますが、宣言の順序が異なります。

y軸の正方形を回転させても同じことが言えます。

値の順序は重要ですが、値の順序を変更する代わりに、値自体を単純に変更して望ましい結果を得ることができることに注意する必要があります。例えば……

 <code>transform: translateX(100px) rotateY(90deg);</code>

...以下と同じ効果：

 <code>transform: rotateY(90deg) translateZ(100px);</code>

これは、最初の行でオブジェクトを回転させる前にx軸にオブジェクトを移動しましたが、2列目でオブジェクトを回転させ、座標を変更してからz軸に移動したためです。同じ結果、異なる値。

もっと面白いものを見てみましょう

もちろん、正方形は視点の一般的な概念を説明するのに最適な方法ですが、それを3次元（3D）形状に分解すると、視点がどのように機能するかを実際に見ることができます。

これまでにカバーしてきたすべてを使用して、3Dキューブを構築しましょう。

HTML

キューブの6つの面を表す6つの要素.cube含む.cube要素を中心に展開する.container要素を作成します。

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

ユニバーサルCSS

まず、 .container要素にいくつかの視点を追加します。次に、 .cube要素の左200pxであることを確認し、3D変換に準拠します。ここにいくつかの表現スタイルを追加しましたが、重要な属性が強調表示されています。

 /*パースペクティブ付きの親コンテナ*/
。容器 {
  幅：400px;
  高さ：400px;
  境界線：2px固体白。
  ボーダーラジウス：4px;
  ディスプレイ：Flex;
  justify-content：center;
  Align-Items：Center;
  視点：800px;
  パースペクティブオリジン：右上。
}

/*子要素、3D変換を保持*/
.cube {
  位置：相対;
  幅：200px;
  高さ：200px;
  変換スタイル：preserve-3d;
}

/*キューブの表面、絶対的な位置決め*/
.side {
  位置：絶対;
  幅：100％;
  高さ：100％;
  不透明：0.9;
  境界線：2px固体白。
}

/*キューブの顔の背景色、作業の視覚化に役立ちます*/
.front {background-color：＃d50000; }
.back {background-color：＃aa00ff; }

.Left {background-color：＃304ffe; }
.right {background-color：＃0091ea; }

.top {background-color：＃00bfa5; }
.bottom {background-color：＃64dd17; }

表面を変更します

正面が最も簡単です。私たちはそれを100pxで前方に移動します：

 。フロント {
  バックグラウンドカラー：＃d50000;
  変換：Translatez（100px）;
}

translateZ(-100px)を追加することで、キューブの背面を後方に移動できます。別の方法は、サイド180degを回転させて前進することです。

 。戻る {
  バックグラウンドカラー：＃aa00ff;
  変換：translatez（-100px）;

  /* または */
  /* transform：rotatey（180deg）translatez（100px）; */
}

背面のように、左側と右側をいくつかの方法で変換できます。

 。左 {
  バックグラウンドカラー：＃304ffe;
  変換：Rotatey（90deg）translatez（100px）;

  /* または */
  /*変換：translatex（100px）rotatey（90deg）; */
}

。右 {
  バックグラウンドカラー：＃0091EA;
  変換：rotatey（-90deg）translatez（100px）;

  /* または */
  /*変換：translatex（-100px）rotatey（90deg）; */
}

上部と下部はわずかに異なります。 y軸でそれらを回転させる必要はありません。x軸でそれらを回転させる必要があります。繰り返しますが、それはいくつかの異なる方法で行うことができます：

 .top {
  バックグラウンドカラー：＃00BFA5;
  変換：rotatex（90deg）translatez（100px）;

  /* または */
  /*変換：翻訳（-100px）rotatex（90deg）; */
}

。底 {
  バックグラウンドカラー：＃64DD17;
  変換：rotatex（-90deg）translatez（100px）;

  /* または */
  /*変換：翻訳（100px）rotatex（90deg）; */
}

これにより、3Dキューブが提供されます！

さまざまなperspectiveとperspective-originオプションを試してみて、それらがキューブにどのように影響するかを確認してください。 「正しい」値はありません。これらの値は、アニメーション、オブジェクトのサイズ、および達成したい効果に依存するため、アイテムによって異なります。

transform-styleについて話しましょう

キューブに素敵なアニメーションを追加しますが、最初にtransform-style属性について説明しましょう。一般的なCSSで以前に追加しましたが、それが何であるか、何がしているのかは実際には説明していません。

transform-style属性には2つの値があります。

• flat （デフォルト値）
• preserve-3d

プロパティをpreserve-3dに設定すると、2つの重要なことを行います。

1. キューブの顔（子要素）がキューブと同じ3D空間にあることを指示します。 preserve-3dに設定されていない場合、デフォルト値はflatで、顔がキューブの平面で平らになります。 preserve-3d 、キューブの視点を子要素（顔）に「コピー」し、キューブのみを回転させることができるため、各顔を個別にアニメーション化する必要はありません。
2. DOMでの位置に関係なく、3Dスペースでの位置に応じて子要素を表示します。

この例には、緑、赤、青の3つの正方形があります。緑の正方形のtranslateZ値は100pxです。つまり、他の正方形の前にあります。ブルースクエアのtranslateZ値は-100pxです。これは、他の正方形の背後にあることを意味します。

しかし、DOMでは、正方形の順序は次のとおりです。緑、赤、青。したがって、 transform-styleがflatに設定されている場合（またはまったく設定されていない）、青色の正方形が上部に表示され、それがDOMの順序であるため、緑色の正方形が後ろになります。ただし、Transform preserve-3dにtransform-styleを設定すると、3Dスペースでの位置に応じてレンダリングされます。その結果、緑の正方形が正面にあり、青い正方形が後ろにあります。

アニメーション

それでは、キューブをアニメーション化しましょう！物事をより面白くするために、3つの軸すべてにアニメーションを追加します。まず、 .cubeにanimationプロパティを追加します。アニメーションキーフレームをまだ定義していないため、まだ何もしませんが、それを行うと、それが整っています。

アニメーション：クベロテート10S線形無限。

今がキーフレームです。基本的に、各軸に沿ってキューブを回転させて、宇宙で転がっているように見えるようにしたいと考えています。

 @KeyFramesCuberotate {
  {transform：rotatey（0deg）rotatex（720deg）rotatez（0deg）; }
  to {transform：rotatey（360deg）rotatex（0deg）rotatez（360deg）; }
}

perspectiveプロパティは、実際には、キューブのスクロールが左右に、前方と後方に表示されるように、アニメーションの深さを与える属性です。

しかし、その前に、 perspective属性の値は一貫しており、 perspective-origin一貫していました。これらの値の変更がキューブの外観にどのように影響するかを見てみましょう。

この例に3つのスライダーを追加して、異なる値がキューブの視点にどのように影響するかを確認するのに役立ちました。

• 左側のスライダーはperspectiveプロパティの値を設定します。この値はオブジェクトプレーンまでの距離を設定するため、値が小さくなればなるほど、視点効果が明らかになります。
• 他の2つのスライダーはperspective-originプロパティを指します。右のスライダーは、上から下まで垂直軸に起源を設定し、下部スライダーは右から左に水平軸上に起源を設定します。

キューブ自体が回転しているため、アニメーションが実行されているときにこれらの変更は明らかではないかもしれませんが、実行アニメーションボタンをクリックしてアニメーションを簡単にオフにすることができます。

これらの値を試してみて、それらがキューブの外観にどのように影響するかを確認してください。 「正しい」値はありません。これらの値は、アニメーション、オブジェクトのサイズ、および達成したい効果に依存するため、アイテムによって異なります。

次のステップ？

CSSにperspective属性の基本ができるようになったので、想像力と創造性を使用して、独自のプロジェクトで3Dオブジェクトを作成し、ボタン、メニュー、入力、「人生に命を与える」他のものに深みと楽しみを追加できます。

同時に、複雑な構造と視点ベースのアニメーションを作成して、この、これ、これ、さらにはスキルを練習および向上させることができます。

この記事を読んで、その過程で何か新しいことを学んだことを楽しんでいただければ幸いです。お気軽にコメントを残して、ご意見をお聞かせください。または、この記事のパースペクティブやその他のトピックについて質問がある場合は、Twitterにコメントを残してください。

以上がCSSの視点の仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。