ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 3D 変換の包括的な適用
CSS3 3D 変換の包括的な適用
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:16:021374ブラウズ
最初にレンダリングを見てみましょう
「ロール」ボタンをクリックすると、回転するアニメーションが表示されます
コードは次のとおりです
<!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 で遊ぶ - 原則