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

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

視點(diǎn)の基本

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

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

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

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

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

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

視點(diǎn)値

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

起源の視點(diǎn)

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

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

変身

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

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

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

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

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

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

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

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

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

...以下と同じ効果：

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

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

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

もちろん、正方形は視點(diǎn)の一般的な概念を説明するのに最適な方法ですが、それを3次元（3D）形狀に分解すると、視點(diǎn)がどのように機(jī)能するかを?qū)g際に見ることができます。

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

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要素にいくつかの視點(diǎn)を追加します。次に、 .cube要素の左200pxであることを確認(rèn)し、3D変換に準(zhǔn)拠します。ここにいくつかの表現(xiàn)スタイルを追加しましたが、重要な屬性が強(qiáng)調(diào)表示されています。

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

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

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

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

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

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

表面を変更します

正面が最も簡(jiǎn)単です。私たちはそれを100pxで前方に移動(dòng)します：

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

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

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

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

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

 。左 {
  バックグラウンドカラー：＃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オプションを試してみて、それらがキューブにどのように影響するかを確認(rèn)してください。 「正しい」値はありません。これらの値は、アニメーション、オブジェクトのサイズ、および達(dá)成したい効果に依存するため、アイテムによって異なります。

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

キューブに素?cái)长圣ⅴ衰岍`ションを追加しますが、最初にtransform-style屬性について説明しましょう。一般的なCSSで以前に追加しましたが、それが何であるか、何がしているのかは実際には説明していません。

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

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

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

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

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

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

アニメーション

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

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

今がキーフレームです?；镜膜恕⒏鬏Sに沿ってキューブを回転させて、宇宙で転がっているように見えるようにしたいと考えています。

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

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

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

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

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

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

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

次のステップ？

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

同時(shí)に、複雑な構(gòu)造と視點(diǎn)ベースのアニメーションを作成して、この、これ、これ、さらにはスキルを練習(xí)および向上させることができます。

この記事を読んで、その過程で何か新しいことを?qū)Wんだことを楽しんでいただければ幸いです。お?dú)葺Xにコメントを殘して、ご意見をお聞かせください。または、この記事のパースペクティブやその他のトピックについて質(zhì)問がある場(chǎng)合は、Twitterにコメントを殘してください。

以上がCSSの視點(diǎn)の仕組みの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。