CSS3 3D 変換の包括的な適用-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 3D 変換の包括的な適用

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

最初にレンダリングを見てみましょう

「ロール」ボタンをクリックすると、回転するアニメーションが表示されます

コードは次のとおりです

<!DOCTYPE html><html><head>    <title></title>    <script type="text/javascript" src="JS/jquery-1.12.2.min.js"></script>    <style type="text/css">        div#camera{            width: 500px;            height: 500px;            outline: 1px solid black;            margin:100px auto;            position: relative;            perspective: 1000px;        }        div#camera>div{            width: 400px;            height: 400px;            position: absolute;            top:calc(50% - 200px);            left:calc(50% - 200px);            outline: 1px solid black;            transition: all 1s linear;            background-color: #fff;            }        div#camera>div:nth-child(1){            transform: rotateY(0deg) translateZ(200px);            z-index: 99;        }        div#camera>div:nth-child(2){            transform: rotateY(90deg) translateZ(200px);        }                div#camera>div:nth-child(3){            transform: rotateY(180deg) translateZ(200px);        }        div#camera>div:nth-child(4){            transform: rotateY(270deg) translateZ(200px);        }        div#camera>div>img{            width: 100%;        }        button{            margin: 10px auto;            display: block;        }    </style></head><body>    <div id="camera">        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D 変換の包括的な適用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D 変換の包括的な適用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D 変換の包括的な適用" ></div>        <div><img  src="/static/imghwm/default1.png"  data-src="Img/102342_40949584.png"  class="lazy"/ alt="CSS3 3D 変換の包括的な適用" ></div>    </div>    <button value="roll">roll</button>    <script type="text/javascript">        $(document).ready(function() {            (function() {                var count=0, reversedCount=4;                 var changeRotateY = function($ele, deg) {                    var index = $ele.index()+1+count;                    var deg = deg*index;                    $ele[0].setAttribute('style','transform:rotateY('+deg+'deg) translateZ(200px);')                }                $('button[value="roll"]').on('click', function() {                    $('div#camera>div').each(function() {                        changeRotateY($(this), 90);                    });                    // changeRotateY($('div#camera>div:nth-child(1)'), 90);                    // changeRotateY($('div#camera>div:nth-child(2)'), 90);                    // changeRotateY($('div#camera>div:nth-child(3)'), 90);                    // changeRotateY($('div#camera>div:nth-child(4)'), 90);                    count++;                     reversedCount--;                    $('div#camera>div').eq(reversedCount%4).css({'z-index':'99'}).siblings().css({'z-index':'0'});                    if(reversedCount==0){                        reversedCount=4;                    }                });            })();                    });    </script></body></html>

ちょっとした分析:

CSS 部分は次の目的で使用されます。静的な 3 次元ボックスを生成します。 # カメラの下の 4 つのサブディビジョンがそれぞれ 0°、90°、180°、270° 回転され、translateZ(200px) は独自の回転座標系に基づきます。 div 自体のサイズは、前方 (つまり、画面に向かう方向)、右、後方 (つまり、画面から離れる方向)、左の 4 つのサブ div に相当します。 400px*400px、この変換後、4 つの div が 3 次元のボックスを形成します。このとき、上から下に見ると、レンダリングは次のようになります。

ここでのtransformの順序は非常に重要です。rotateYが最初に回転され、次にtranslateZである場合、translateZは座標に基づいて変換されます。最初に Z を移動し、次に回転 Y を実行すると、すべての要素が最初に移動され、その後、ある位置で回転されます。
changeRotateY 関数は、div の回転角度を変更し、要素の eq と渡されたカウント値 (ボタンがクリックされた回数) に基づいて要素の回転 Y 値を設定するために使用されます。変換値を動的に取得するという問題があるため、この関数はあまり柔軟ではなく、少し残念です。初めてクリックすると、count 0、index() 0 の要素のrotateY は 0° から 90° に増加し、index() 1 の要素のrotateY は 90° から 180° に増加します。 2 回目にクリックすると、カウントは 1 になり、上記の値はそれぞれ 90 度ずつ増加し、無限回転の効果が完成します。
大きな問題は、戻るは引き続き表示されます。私はbackface-visibility:hiddenを試しましたが、どちらもあまりうまく機能せず、特にbackface-visibilityは90度に回転しても表示され、必要に応じてbackfaceは90.01度でのみ非表示になります。 backface-visibility を使用して非表示にします。後の要素は微調整が必要で、わずかな位置ずれの問題が発生するため、あきらめました
最後に、z-index を使用して、後の要素を非表示にします。前の要素はより大きな値に動的に設定されます。 z-index 属性は、位置が静的な要素では機能しないことに注意してください。もちろん、ここでの div は絶対値なので、非常にうまく適用できます~
表示される要素の eq 値はそれぞれ 3、2、1、0 です。もちろん、増加する count 変数を使用します。 + switch / if else ステートメントも実行できますが、可読性は大幅に低下します。代わりに、z-index が毎回設定される要素を照合する、減分する reversedCount 変数が追加されます。

転載は大歓迎ですので、出典を明記してください。

参考: CSS 3D で遊ぶ - 原則

声明

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

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

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）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。