このブログの目的は、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角度を変更するだけです。
上記は、この記事のすべての内容です。