ホームページ > 記事 > ウェブフロントエンド > css3_html/css_WEB-ITnose に基づく散在 3D 反転効果
css3_html/css_WEB-ITnose に基づく散在 3D 反転効果
- WBOYオリジナル
- 2016-06-24 11:51:541100ブラウズ
css3 を使用すると、2D 空間から飛び出して 3D 空間でアニメーション効果を実現できます。これは、自動反転 3D サイコロ アニメーション効果の作成プロセスです。
最初のステップは HTML をレイアウトすることです。3D 効果の場合、レイアウトには次のようなルールがあります。
<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div></div></body>
最も外側の div である、outer という div を定義します。 3D シーンを提供するために使用され、このような div を定義することによってのみ、3D グラフィックスを表示することができます。サイコロを組み合わせてください。最後に、サイコロの 6 つの平面を表す 6 つの平行な div を定義します。
2 番目のステップは、3 次元シーンの CSS を定義することです。 コードは次のとおりです:
#outer{ /*定义视距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; } ここでの遠近感は、3 次元シーンを通して内部の 3 次元効果が見える距離を表します。値が大きいほど、効果はより遠くに現れます。値が小さいほど、効果はより近くに現れます。 Perspective-origin は、ブラウザーに対して 3 次元グラフィックスが表示される角度を表します。最初のパラメーターは X 軸方向を表し、2 番目のパラメーターは Y 軸方向を表します。単位値は px またはパーセントを使用できます。 。 ff および chrome との互換性を実現するために、対応する CSS 名に moz および WebKit プレフィックスが追加されます。ここで、CSS3 での座標の定義について次のように説明する必要があります。
CSS3 では、X 軸の正の方向は右、Y 軸の正の方向は下、そしてZ 軸の正の方向は、画面の内側から画面の外側に伸びます。ジオメトリの座標系は異なる方法で定義されます。
3 番目のステップは、グループの ID を使用して div の CSS 属性を設定することです。この div は主に、全体的なアニメーション効果の定義を容易にするために、サイコロの 6 つのプレーンを組み合わせます。コードは次のとおりです。
ここでは div の幅と高さを定義し、その位置を相対的に定義します。これにより、その中の 6 つのプレーンがこの div を基準にして絶対的に配置されるようになります。同時に、transform-style:preserve-3d 属性がブラウザーに指示します。すべての変換変換は 2D 空間ではなく 3D 空間での変換であるため、互換性のためにプレフィックスも追加されます。4 番目のステップは、各プレーン div の共通のページ属性、つまり各サブプレーンの共通の CSS 属性を定義することです。 コードは次のとおりです:
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; } ここで、それぞれの幅と高さを定義します。平面とその親 div グループの幅と高さは同じで、絶対配置が実行されます (絶対配置され、ドキュメント フローから分離されている場合にのみ、transform3D 変換効果を適用できます。それ以外の場合は、2D でのみ変換できます)。 space) 説明する必要があるのは、これら 2 つの文です
5 番目のステップは、各プレーンの div の CSS プロパティを定義することです
最初のプレーン:
.page{ width: 200px; height: 200px; position: absolute; border-radius: 20px; text-align: center; font-weight: bold; opacity: 0.5; overflow: hidden; filter:alpha(opacity=50); font-size:150px; word-break:break-all; word-wrap:break-word; }
各平面を区別するには、3D 効果を表示します。ここでは、隣接する div に異なる背景色を設定する必要があります。最初の div は、デフォルトでは変換なしで XY 平面に配置されます。 2 番目の平面:
#page1{background-color: #10a6ce;line-height: 100px;} ここでは、transform-origin を使用して平面を定義します。ここでは、右端が Y 軸に沿って -90 度回転されます。接頭辞も互換性のために追加されています。
3面目:
rreee
3面目:
rreee
5面目:
rreee
6面目:
rreee
これ6 番目の平面は、その幅と高さをそれに沿って変換する必要があります。 Z 軸、および他の平面を接続する目的を達成しました
ステップ 6、キー フレーム アニメーションを定義します。コードは次のとおりです:
#page2{ background-color: #0073b3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); -moz-transform-origin:right; -moz-transform:rotateY(-90deg); line-height: 100px; } ここでのアニメーションは 0% から 50% までの 2 つの段階に分かれています。ダイは、時間の 50% から 100% まで、Y 軸に沿って 360 度回転します。 内部で、キーフレーム アニメーションに沿ってさらに 360 度回転を実行します。これは、色の変化の 6 つのプレーンを同時に変換する必要があるためです。 6 つのプレーンの親 div で呼び出す必要があります。
#page3{ background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); -moz-transform-origin:left; -moz-transform:rotateY(90deg); line-height: 80px; } ;CSS プロパティを 3 番目のステップの結果に追加し、scroll という名前のアニメーションが呼び出されることを示します。アニメーションの時間は 8 秒、アニメーション変換の速度は一定で、アニメーションはすぐに開始され、無限のアニメーション効果のサイクルが実行されます。
オンライン プレビュー ソース コードのダウンロード