HTMLとCSSの3D変換モジュール-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLとCSSの3D変換モジュール

php中世界最好的语言

Mar 13, 2018 am 11:45 AM

csshtml

今回はHTMLとCSSの3D変換モジュールについてご紹介します。HTMLとCSSで3D変換モジュールを使用する際の注意点は何ですか?実際の事例を見てみましょう。記事内のimgタグ![](images/jacky/xin.png)は全てmacdown形式に変換しました

一 2Dと3Dとは

1.平面、幅と高さのみ、厚さなし

3D は、幅、高さ、厚さがある 3 次元の体です

デフォルトでは、すべての要素が 2D で表示されます

2 要素を 3D で表示する方法

同じです。パースペクティブとして、特定の要素の 3D 効果を確認したい場合は、transform-style 属性をその親要素に追加して、preserve-3d に設定するだけです

3.Transform-style value:

flat: デフォルト値、2 次元;

prepare-3d: 3D 効果;

<html lang="en"> <head>     <meta charset="UTF-8">     <title>106-3D转换模块</title>     <style>
         *{             margin: 0;             padding: 0;         }         
         .father{             width: 200px;             height: 200px;             
         background-color: red;             border: 1px solid #000;             margin: 100px auto;
                      perspective: 500px;             transform-style: preserve-3d; 
                      transform: rotateY(0deg); 
                               }         .son{             width: 100px;             height: 100px;             background-color: blue;             border: 1px solid #000;             margin: 0 auto;             margin-top: 50px;             transform: rotateY(45deg);         }     </style> </head> <body> <p class="father">     <p class="son"></p> </p> </body> </html>

2. Cube (欠陥あり、ページ上のテキスト表示に問題があります)

<html lang="en"> <head>     <meta charset="UTF-8">     <title>107-3D转换模块-正方体</title>     <style>     *{         margin: 0;         padding: 0;     }     ul{         width: 200px;         height: 200px;         border: 1px solid #000;         box-sizing: border-box;         margin: 100px auto;         position: relative;         transform: rotateY(0deg) rotateX(0deg);         transform-style: preserve-3d;     }     ul li{         list-style: none;         width: 200px;         height: 200px;         font-size: 60px;         text-align: center;         line-height: 200px;         position: absolute;         left: 0;         top: 0;     }     ul li:nth-child(1){         background-color: red;         transform: translateX(-100px) rotateY(90deg);     }     ul li:nth-child(2){         background-color: green;         transform: translateX(100px) rotateY(90deg);     }     ul li:nth-child(3){         background-color: blue;         transform: translateY(-100px) rotateX(90deg);     }     ul li:nth-child(4){         background-color: yellow;         transform: translateY(100px) rotateX(90deg);     }     ul li:nth-child(5){         background-color: purple;         transform: translateZ(-100px);     }     ul li:nth-child(6){         background-color: pink;         transform: translateZ(100px);     } </style> </head> <body> <ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>     <li>6</li> </ul> </body> </html>

Cube (欠陥あり、理解のためのみ)

HTMLとCSSの3D変換モジュール

3. 立方体 (究極の解決策)

90 度回転した後、座標系も 90 度回転するため、Z 軸に沿って移動する必要があります。

ステレオ効果戦略: 最初にある程度回転します。、z 軸に沿って変換します

<html lang="en"> <head>     <meta charset="UTF-8">     <title>108-3D转换模块-正方体终极</title>     <style>         *{             margin: 0;             padding: 0;         }         ul{             width: 200px;             height: 200px;             border: 1px solid #000;             box-sizing: border-box;             margin: 100px auto;             position: relative;             transform: rotateY(0deg) rotateX(0deg);             transform-style: preserve-3d;         }         ul li{             list-style: none;             width: 200px;             height: 200px;             font-size: 60px;             text-align: center;             line-height: 200px;             position: absolute;             left: 0;             top: 0;         }        
ul li:nth-child(1){             background-color: red;             transform: rotateX(90deg) translateZ(100px);                    }         
ul li:nth-child(2){             background-color: green;             transform: rotateX(180deg) translateZ(100px);         }         ul li:nth-child(3){             background-color: blue;             transform: rotateX(270deg) translateZ(100px);         }         ul li:nth-child(4){             background-color: yellow;             transform: rotateX(360deg) translateZ(100px);         }         ul li:nth-child(5){             background-color: purple;             transform: translateX(-100px) rotateY(90deg);         }         ul li:nth-child(6){             background-color: pink;             transform: translateX(100px) rotateY(90deg);         }     </style> </head> <body> <ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>     <li>6</li> </ul> </body> </html>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。！ HTMLとCSSの3D変換モジュール
推奨読書:

HTMLとCSSのトランジションモジュール

HTMLとCSSの2D変換モジュール

以上がHTMLとCSSの3D変換モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform