css3 3Dルービックキューブアニメーション（初心者版）

リーリー

html5+CSS3 で完成できる 3D ルービック キューブ アニメーションをここで共有します ~ 写真も真実もありません。最初にレンダリングを示します

最初のステップは非常に簡単で、ルービック キューブの構造を描くことです。誰もがルービック キューブで遊んだことがあり、ルービック キューブが 6 つの面を持つ立方体であることを知っています。ここではまず、ルービック キューブの 6 つの面、つまり 6 つの div を含むコンテナとして大きな div (クラス名ボックス) を作成します。次に、各面を 9 つの小さな div (9 つの小さなグリッド) に分割します。コードは次のとおりです、ちょっと見てください

リーリー

第 2 ステップでは、ルービック キューブの構造を使用して、ルービック キューブに色を付け始めます。コードを直接見てみましょう、シンプルで粗雑です~

リーリー

3 番目のステップです。私たちは長い間ルービック キューブを描いてきました。そのファイルをブラウザに入れて見てみたら、ルービック キューブの影すらないことに気づきましたか? 急いでない。まず親コンテナにtransform-style:preserve-3dを追加する必要があります。このコードは重要です，让该元素的子元素看起来变成3D效果，默认是平面效果（2D），(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

。

このコードを追加した後、結合したときに立方体のように見えるように 6 つの面を移動し始める必要があります。 6 つの面を移動するのは、次のコード行にすぎません

リーリー

何？ブラウザに互換性がないということでしょうか？対応するプレフィックスを自分で追加するだけですが、ここでは詳しく説明しません。栗 (-webkit-transform:rotatex(30deg);)

ブラウザ F12 を開いて、必要な角度をゆっくりとデバッグします。参考のために自分のコードをここに貼り付けます~

リーリー

これだけやってもルービックキューブの全体像は見えません。

それでは、ズームインして、perspective:1000px;perspective-origin:25% 75%;

を親コンテナに追加しましょう

次に、ブラウザ F12 で値をゆっくりデバッグして、変更があるかどうかを確認します。最後に、上記のコードを投稿しました。具体的なアニメーションの原理については、また別の日に書きます。読んでいただきありがとうございます。エンディング〜