このブログの目的は、HTML5 CSS3特別インスタンスCSS3の魅惑的なインスタンスが、CSS 3D効果について比較的重要な知識ポイントがあるからです。
エフェクトチャート:ねえ、私は大学卒業の写真をロータリートロイの木馬に撮り、私の大きなテキストと私の母校の栽培の恵みを回転させました〜
1。視点パースペクティブ属性には、ユニットのなしと長さの2つの属性が含まれます。
その中で、Perspective属性のデフォルト値はなしではありません。つまり、3Dオブジェクトは無制限の角度で表示されますが、フラットに見えます。別の値<Langth>は、0を超えるユニットの値を受け入れます。そのユニットはパーセンテージにすることはできません。 <langth>の値が大きいほど、角度が遠くに表示されるため、非常に低い強度と非常に小さな3Dスペースの変化が生じます。逆に、この値が小さくなればなるほど、角度が近く、高強度の角度と大きな3D変化を作成するように近づきます。簡単に言えば、視点設定が設定されている場合、3D効果が明らかになるほど、目が3Dオブジェクトに近づき、逆も同様であることを意味します。
2。変換:翻訳(長さ)300pxの視点を設定すると、Translatezの値が小さくなるほど、設定値が300pxに近い場合、その前には見えません。
上記の例の中核:1.まず、すべての写真の容器は位置です。絶対的で、重ね合わせてから、一度に40*i、i = 0、1、2 ... 9に回転を設定します。
2。その後、コンテナの各画像の翻訳を設定します。
HTML:
<!doctype html> <html> <head> <title> </title> <utf-8/> <link href = css/reset.css rel = styleSheet type = text/css/> <script = Text/JavaScript src = ../..// jquery-1.8.3.js> </scrip> <script type = text/javascript> // alert(64/math.tan(20/180 * math.pi))) )var変換(要素、key){key || ; return要素;} $(function(){var deg = -40、i = 1; $(#container).click(function(){transform($(this)[0]、rotatey( +(deg *)) deg *] i ++)+deg)})});}); /1.jpg/> <span>一度に1つのことをしてください。時間、そしてうまくいきます</li> <li> <img/3.jpg/> <span> > <img src = img // 4.jpg/> <span> Whats ows dowsは順調ですあなたの安全性。 li> <li> <img src = img/7.jpg/> <span>明日まで今日できることはありません。 > <Span>すべてのトランジュのジャック</span> </li> <img/9.jpg/> <span>出演から> </div> </body> </html "CSS:
li {width:0、0、0、.5:0;} 0、0、.5); {900px:100px:auto:100px 50px; jpg)0 0; - 遷移:webkit-transform:webkit-transform-3d; (0deg)translatez(300px);} li:nth-child(1){-webkit-transform:rotatey(40deg)translatez(300px);} li:nth-child(2){-webkit-transform:rotat ey( 80deg)translatez(300px);} li:nth-child(3){-webkit-transform:rotatey(120deg)translatez(300px);} li:nth-child(4){-webkit-transform:16 0deg)翻訳(300px);} li:nth-child(5){-webkit-traansform:rotatey(200deg)translatez(300PX);} 300px);} li:nth-child(7){-webkit-transform:rotatey(280deg)translatez(300px);} li:nth-child(8){-webkit-transform:rotatey(300px);} li: nth-child(9){-webkit-transform:rotatey(360deg)translatez(300px);}div#ステージは、各Liを設定し、翻訳者を設定しますデフォルト値は、すべてのサブエレメントが2D飛行機で提示されることを意味します。 Preserve-3dは、すべてのサブエレメントが3Dスペースで提示されていることを示しています。変換スタイルの値が要素上で保護者-3Dに設定されている場合、フラット展示会を実行せず、彼のすべてのサブ要素が3Dスペースにあることを示します。通常の状況では、この属性は3Dアニメーション効果の実行要素に使用されます。つまり、3Dアニメーション効果を使用するため、サブエレメントは3Dスペースにある必要があります。
この例では、アニメーション効果は、実際にはすべての画像要素がdiv#containerであることです。このトロイの木馬を回転させることであるため、毎回Div#コンテナの回転40角度を変更するだけです。
上記は、この記事のすべての内容です。