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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

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

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

Dreamweaver Mac版

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。