CSS3の3Dスタート
CSS3の3Dをプレイするには、いくつかの語彙、つまり視点、回転、翻訳を理解する必要があります。視点とは、現実的な観点から画面上の2Dのものを見ることを意味し、それによって3Dの効果を示します。回転は、2D平面上の回転ではなく、X軸、Y軸、Z軸回転を含む3次元座標系の回転です。翻訳にも同じことが言えます。
もちろん、理論を説明して説明すると、おそらく理解していません。ここに3つのGIFがあります：
x軸に沿って回転します
y軸に沿って回転します
Z軸に沿って回転します
回転に問題はないはずなので、翻訳を理解しやすいです。つまり、X軸、Y軸、Z軸を移動します。
視点を理解するのは難しいと言うかもしれません。視点のいくつかの属性を紹介させてください。
視点
視点の英語名は視点です。これがなければ、3D効果を形成する方法はありません。しかし、このことにより、ブラウザはどのようにして3D効果を形成できますか？下の写真を見ることができます。実際、絵画を学んだ人は視点の関係を知っているべきであり、これが理由です。
しかし、CSSでは数値値があります。たとえば、1000pxは何を表していますか？このように、オブジェクトを直接見ると、オブジェクトが圧倒され、視力を占めることを理解できます。それから私たちの距離はますます小さくなり、3次元の感覚が現れます。実際、この値は私たちの目とスクリーンの間の距離を構築し、仮想3D錯覚も構築します。
パースペクティブオリジン
上記から、私たちは視点を理解し、この起源が何であるかを追加します。前述のものはオブジェクトからの距離であり、これは目の視線です。私たちの視点の異なる位置は、私たちが見るさまざまなシーンを決定します。デフォルトはセンターであり、これは視点オリジンです：50％50％。最初の値は、3D要素の基礎となるX軸であり、2番目の位置はy軸で定義されます。
要素のパースペクティブオリジン属性を定義する場合、その子要素は要素自体ではなく、視点効果を得ます。 Perspective属性とともに使用する必要があり、3D変換要素のみに影響します。 （w3school）
変換スタイル
視点は再びここにあります。はい、CSSの3Dの鍵です。変換スタイルはデフォルトでフラットです。要素に対する3D効果を確認したい場合は、Transform-Style：Preserve-3Dを使用する必要があります。そうでなければ、3D変換ではなく、単なる平面変換です。
CSS3-3Dステップでプレイしてください
上記のコンセプトを少し理解しているので、以下の実際の戦闘を始めましょう！
その効果を見てみましょう、それはクールではありません：https：//bupt-hjm.github.io/css3-3d/に直接アクセスしてください、あなたがそれが大丈夫だと思うなら、それをスターに与えることを忘れないでください
ステップ1：HTML構造
非常にシンプルな容器は、6個を含むピースボックスで包まれています
<div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </div> </div> </div> </div> div>
ステップ2：3Dワールドに入るために必要な3D属性を追加します
上記の説明を通して、あなたは視点にもっと精通するはずです。
/* Container*/.Container {-Webkit-perspection：1000px; -moz-perspect：1000px; -ms-perspect：1000px;視点：1000px;}/*ピースボックス*/ .piece-box {perspective-origin：50％50％; -webkit-transform-style：preserve-3d; -moz-transform-style：preserve-3d; -ms-transform-style：preserve-3d;変換スタイル：preserve-3d;}ステップ3：必要なスタイルを追加します
/* Container*/.Container {-Webkit-perspection：1000px; -moz-perspect：1000px; -ms-perspect：1000px;視点：1000px;}/*ピースボックス*/。ピースボックス{position：relative;幅：200px;高さ：200px;マージン：300px Auto;パースペクティブオリジン：50％50％; -webkit-transform-style：preserve-3d; -moz-transform-style：preserve-3d; -ms-transform-style：preserve-3d;変換スタイル：preserve-3d;}/*ピース一般スタイル*/。ピース{position：absolute;幅：200px;高さ：200px;背景：赤;不透明：0.5;}。ピース1 {背景：＃ff6666;}。ピース2 {背景：＃fff00;}。もちろん、このステップを完了した後、3D変換がまだ始まっていないため、私たちのピース6である正方形のみが表示されます。
ステップ4：3D変換攻撃
最初のことは、回転ランタンを実現することです。私たちはそれを最初に手放すべきではありません、光の部分を実現してください。
それを達成する方法は？円を形成するために、円は360度で、6個のピースがあります。その後、各ピースを60度の増分で回転させる必要があると考えるのは簡単です。
センターからそれらを引き出す方法は？
ここでは、y軸の周りに元素を回転させた後、x軸とz軸が実際に回転するため、キューブの各表面の垂直線が依然としてz軸であることに注意する必要があります。 Translatezの価値を変更するだけです。翻訳が前向きなとき、私たちはそれを引き離すことができるように、私たちは自分の方向に歩きます。
しかし、距離を測定する方法は？
一目で明らかですか？
CSSを変更しましょう
.piece-1 {background：＃ff6666; -webkit-transform：rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;}。 -webkit-transform：rotatey（60deg）translatez（173.2px）; -ms-transform：rotatey（60deg）translatez（173.2px）; -o-transform：rotatey（60deg）translatez（173.2px）;変換：Rotatey（60deg）translatez（173.2px）;}。 -webkit-transform：rotatey（120deg）translatez（173.2px）; -ms-transform：rotatey（120deg）translatez（173.2px）; -o-transform：rotatey（120deg）translatez（173.2px）; -o-transform：rotatey（120deg）translatez（173.2px）;変換：Rotatey（120deg）translatez（173.2px）;}。 -webkit-transform：rotatey（180deg）translatez（173.2px）; -ms-transform：rotatey（180deg）translatez（173.2px）; -o-transform：rotatey（180deg）translatez（173.2px）;変換：Rotatey（180deg）translatez（173.2px）;}。 -webkit-transform：rotatey（240deg）translatez（173.2px）; -ms-transform：rotatey（240deg）translatez（173.2px）; -o-transform：rotatey（240deg）translatez（173.2px）;変換：Rotatey（240deg）translatez（173.2px）;}。 -webkit-transform：rotatey（300deg）translatez（173.2px）; -ms-transform：rotatey（300deg）translatez（173.2px）; -o-transform：rotatey（300deg）translatez（173.2px）;変換：rotatey（300deg）translatez（173.2px）;}回転ランタンは実現しましたか？
ステップ5：アニメーションは3D移動します
移動するランタンを達成するために、実際には非常に簡単です。回転アニメーションをピースボックスに追加するだけです。アニメーションを5秒で完了し、0度から360度から回転させます
/*ピースボックス*/。ピースボックス{position：relative;幅：200px;高さ：200px;マージン：300px Auto;パースペクティブオリジン：50％50％; -webkit-transform-style：preserve-3d; -moz-transform-style：preserve-3d; -ms-transform-style：preserve-3d;変換スタイル：preserve-3d;アニメーション：PiceRotate 5s; -moz-animation：cecerotate 5s; / * firefox */ -webkit -animation：ceperotate 5s; / * safari and chrome */ -o -animation：ceperotate 5s; /*OPERA*/}/*REVOLVING LAMP ANIMATION*/@keyFrames pecerotate {0％{-WebKit-Transform：rotatey（0DEG）; -ms-transform：rotatey（0deg）; -o-transform：rotatey（0deg）;変換：rotatey（0deg）;} 100％{-webkit-transform：rotatey（360deg）; -ms-transform：rotatey（360deg）; -o-transform：rotatey（360deg）;変換：rotatey（360deg）;}}/ * firefox */@ - moz-keyframes pecerotate {0％{-webkit-transform：rotatey（0deg）; -ms-transform：rotatey（0deg）; -o-transform：rotatey（0deg）;変換：rotatey（0deg）;} 100％{-webkit-transform：rotatey（360deg）; -ms-transform：rotatey（360deg）; -o-transform：rotatey（360deg）;変換：rotatey（360deg）;}}/ * safari and chrome */@ - webkit-keyframes pecerotate {0％{-webkit-transform：rotatey（0deg）; -ms-transform：rotatey（0deg）; -o-transform：rotatey（0deg）;変換：rotatey（0deg）;} 100％{-webkit-transform：rotatey（360deg）; -ms-transform：rotatey（360deg）; -o-transform：rotatey（360deg）;変換：rotatey（360deg）;}}/ * opera */@-o-keyframes pecerotate {0％{-webkit-transform：rotatey（0deg）; -ms-transform：rotatey（0deg）; -o-transform：rotatey（0deg）;変換：rotatey（0deg）;} 100％{-webkit-transform：rotatey（360deg）; -ms-transform：rotatey（360deg）; -o-transform：rotatey（360deg）;変換：rotatey（360deg）;}}ここにGIFを入れません〜HHHはクールな効果を達成しますか？まだ終わっていません〜よりクールなキューブアセンブリ
実際には、キューブを実装することは難しくありません。ここでは詳しく説明しません。最初に顔を想像してから、他の顔を拡張して実装できます。たとえば、キューブのフロントトランスレッツ（100px）を100pxの近くに配置し、次に翻訳（-100px）を配置してから、100pxから遠ざけます。左側はtranslatex（-100px、その後Rotatey（90deg）、右側はtranslatex（100px）、そしてrotatey（90deg）、上部はtranslatey（-100px）、Rotatex（90deg）、下部には翻訳（100px）、Rotatex（90deg）、rotatex（90deg）、 （90deg）。
CSSは次のとおりです。以下はピースのみです1。他の読者は自分でそれを実装したり、私のgithubソースコードを見ることができます
.piece-1 {background：＃ff6666; -webkit-transform：rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;アニメーション：fiep1rotate 5s 5s; -moz-animation：fiece1rotate 5s 5s; / * firefox */ -webkit -animation：fiece1rotate 5s 5s; / * safari and chrome */ -o -animation：fiece1rotate 5s 5s; / * opera */ -webkit-animation-fill-mode：forwards; / * Chrome、Safari、Opera */ Animation-Fill-Mode：Forward; }/*front*/ @keyframes feace1rotate {0％{-webkit-transform：rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;} 100％{-webkit-transform：rotatey（0deg）translatez（100px）; -ms-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）;変換：Rotatey（0Deg）Translatez（100px）;} / * firefox * / @-moz-keyframes peace1rotate {0％{-webkit-transform：rotatey（0deg）translatez（100px）;}} / * firefox * / @-moz-keyframes-frames-formprated-forttr {-webtateTate {0％{0％ rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;} 100％{-webkit-transform：rotatey（0deg）translatez（100px）; -ms-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）;変換：rotatey（0deg）translatez（100px）;変換：rotatey（0deg）translatez（100px）; translatez（100px）;} / * safari and chrome * / @ @-webkit-keyframes peace1rotate {0％{-webkit-transform：rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;} 100％{-webkit-transform：rotatey（0deg）translatez（100px）; -ms-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）;変換：rotatey（0deg）translatez（100px）;} / * opera * / @-o-keyframes peace1rotate {0％{-webkit-transform：rotatey（0deg）translatez（173.2px）; -ms-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）; -o-transform：rotatey（0deg）translatez（173.2px）;変換：rotatey（0deg）translatez（173.2px）;} 100％{-webkit-transform：rotatey（0deg）translatez（100px）; -ms-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）; -o-transform：rotatey（0deg）translatez（100px）;変換：rotatey（0deg）translatez（100px）;}}慎重な読者は、私がアニメーションフィルモード：フォワードを使用したことを知ることができます。これは、実際にこれらのピースを最終的なアニメーション効果、つまりキューブの効果に保持することです。読者はそれを試しても試してみることができますが、元の状態に復元されます。
最後に、キューブが回転します。前のコンテナはすでにアニメーションを使用しています。読者は、クラスを追加してアニマイトンを置くことができると考えるかもしれません。 HHH、アニマイトンは正面を覆い、フロントランタンのアニメーションはなくなります。したがって、HTML構造では、次のように別のボックスラッピングピースを追加しました
<div> <div> <div><!--New container--> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div>
アニメーションでは、キューブアニメーションの遅延時間を制御できます。つまり、アニメーションを開始する前にキューブアセンブリが完了するまで待ちます
アニメーション：BoxRotate 5s 10s Infinite;最初の5秒はアニメーション期間、2番目の10Sは遅延時間です。その後、キューブをX軸の周りで0度から360度、Y軸の周りで0〜360度に回転させます。
.piece-box2 {-webkit-transform-style：preserve-3d; -moz-transform-style：preserve-3d; -ms-transform-style：preserve-3d;変換スタイル：preserve-3d;アニメーション：BoxRotate 5s 10s Infinite; -moz-animation：boxrotate 5s 10s Infinite; / * firefox */ -webkit -animation：boxrotate 5s 10s Infinite; / * Safari and Chrome */ -o -animation：BoxRotate 5s 10s Infinite; /*opera*/}/*キューボイドローテーションアニメーション*/@keyframes boxrotate {0％{-webkit-transform：rotatex（0deg）rotatey（0deg）;）; -ms-transform：rotatex（0deg）rotatey（0deg）;）; -o-transform：rotatex（0deg）rotatey（0deg）;）;）;変換：rotatex（0deg）rotatey（0deg）;）;} 100％{-webkit-transform：rotatex（360deg）rotatey（360deg）; -ms-transform：rotatex（360deg）rotatey（360deg）; -o-transform：rotatex（360deg）rotatey（360deg）;変換：Rotatex（360deg）rotatey（360deg）;}}/ * firefox */@ - moz-keyframes boxrotate {0％{-webkit-transform：rotatex（0deg）rotatey（0deg）;）; -ms-transform：rotatex（0deg）rotatey（0deg）;）; -o-transform：rotatex（0deg）rotatey（0deg）;）;）;変換：rotatex（0deg）rotatey（0deg）;）;} 100％{-webkit-transform：rotatex（360deg）rotatey（360deg）; -ms-transform：rotatex（360deg）rotatey（360deg）; -o-transform：rotatex（360deg）rotatey（360deg）;変換：rotatex（360deg）rotatey（360deg）;}}/ * safari and chrome */@ - webkit-keyframes boxrotate {0％{-webkit-transform：rotatex（0deg）rotatey（0deg）;）; -ms-transform：rotatex（0deg）rotatey（0deg）;）; -o-transform：rotatex（0deg）rotatey（0deg）;）; rotatex（0deg）rotatey（0deg）;）;変換：rotatex（0deg）rotatey（0deg）;）;} 100％{-webkit-transform：rotatex（360deg）rotatey（360deg）; -ms-transform：rotatex（360deg）rotatey（360deg）; -o-transform：rotatex（360deg）rotatey（360deg）;変換：ROTATEX（360DEG）ROTATEY（360DEG）;}}/ * Opera */@-O-KeyFrames BoxRotate {0％{-WebKit-Transform：Rotatex（0DEG）Rotatey（0DEG）;）; -ms-transform：rotatex（0deg）rotatey（0deg）;）; -o-transform：rotatex（0deg）rotatey（0deg）;）;変換：rotatex（0deg）rotatey（0deg）;）;} 100％{-webkit-transform：rotatex（360deg）rotatey（360deg）; -ms-transform：rotatex（360deg）rotatey（360deg）; -o-transform：rotatex（360deg）rotatey（360deg）;変換：rotatex（360deg）rotatey（360deg）;}}最終的な効果が完了しました！
上記は、CSS 3Dの実装の例です。困っている学生はそれを参照できます。このサイトへのご支援ありがとうございます！