css3_html/css_WEB-ITnose に基づく散在 3D 反転効果-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose に基づく散在 3D 反転効果

WBOY

リリース： 2016-06-24 11:51:54

オリジナル

1099 人が閲覧しました

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 秒、アニメーション変換の速度は一定で、アニメーションはすぐに開始され、無限のアニメーション効果のサイクルが実行されます。

オンラインプレビューソースコードのダウンロード