ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 でネストされた立方体の 3D 効果を実現 Rotation_html/css_WEB-ITnose
CSS3 でネストされた立方体の 3D 効果を実現 Rotation_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:371382ブラウズ
Web サイトの 3D キューブ効果が非常に素晴らしいことを知ったので、それを真似して CSS3 を使用して同様の効果を実現しました: http://1.huizit1.applinzi.com//CSS/transform_3D/ cube_3D.html
この 3D パース効果は、主にパースペクティブとtransform-style:preserve-3d;の2つの属性を使用します。次に、対応する要素にtransformを追加するだけです。
まずレイアウト構造を見てみましょう:
<div class="container"> <div class="box"> <ul class="cube_1"> <li><img src="../Img/1.jpg"></li> <li><img src="../Img/2.jpg"></li> <li><img src="../Img/3.jpg"></li> <li><img src="../Img/4.jpg"></li> <li><img src="../Img/5.jpg"></li> <li><img src="../Img/6.jpg"></li> </ul> <ul class="cube_2"> <li><img src="../Img/7.jpg"></li> <li><img src="../Img/8.jpg"></li> <li><img src="../Img/9.jpg"></li> <li><img src="../Img/1.jpg"></li> <li><img src="../Img/2.jpg"></li> <li><img src="../Img/3.jpg"></li> </ul> </div> </div>
コンテナはページ上の適切な位置に配置され、ボックスはコンテナの中央に配置されます。 cube_1 は外側の小さな立方体、cube_2 は外側の小さな立方体です。 ul と li の位置を絶対的な中心位置に設定し、各画像を Y 軸または X 軸を中心に対応する角度だけ回転し、Z 軸に対応する距離だけ移動します。レイアウトが完了したら、対応するアニメーションを追加し、マウスが移動したときの変化を追加します。
注: cube_1 と cube_2 でそれぞれパースペクティブとトランスフォーム スタイルの 2 つの属性を使用しました。表示するように設定した後、外側の立方体は内側の立方体に対してブロック効果を持たないと思います。上記の 2 つの属性は分離され、相互に影響を与えませんでした。その後、transform-style:preserve-3d をコンテナに追加すると、オクルージョン効果が現れることがわかりました。問題が解決しました。
コードは少し乱雑で肥大化しています:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cube_3D</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 800px; 14 height: 500px; 15 background-color: #ccc; 16 margin: 50px auto; 17 position: relative; 18 } 19 .container .box{ 20 margin: auto; 21 position: absolute; 22 width: 1px; 23 height: 1px; 24 top: 0; 25 left: 0; 26 bottom: 0; 27 right: 0; 28 background-color: red; 29 transform-style: preserve-3d; 30 } 31 @keyframes an1{ 32 0%{ 33 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 34 } 35 25%{ 36 transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg); 37 } 38 50%{ 39 transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg); 40 } 41 75%{ 42 transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg); 43 } 44 100%{ 45 transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 46 } 47 } 48 .container .box .cube_1{ 49 list-style: none; 50 width: 200px; 51 height: 200px; 52 margin: -100px -100px; 53 position: absolute; 54 perspective: 4000px; 55 transform-style: preserve-3d; 56 animation: an1 10s linear 0s infinite; 57 } 58 .container .box .cube_1 li{ 59 position: absolute; 60 width: 200px; 61 height: 200px; 62 opacity: 0.5; 63 transition: transform .2s ease-in 0s; 64 } 65 .container .box .cube_1 li img{ 66 width: 200px; 67 height: 200px; 68 } 69 .container .box .cube_1 li:nth-child(1){ 70 transform: rotateY(0deg) translateZ(100px); 71 transition: all 1s ease-in 0; 72 } 73 .container .box .cube_1 li:nth-child(2){ 74 transform: rotateY(90deg) translateZ(100px); 75 } 76 .container .box .cube_1 li:nth-child(3){ 77 transform: rotateY(180deg) translateZ(100px); 78 } 79 .container .box .cube_1 li:nth-child(4){ 80 transform: rotateY(270deg) translateZ(100px); 81 } 82 .container .box .cube_1 li:nth-child(5){ 83 transform: rotateX(90deg) translateZ(100px); 84 } 85 .container .box .cube_1 li:nth-child(6){ 86 transform: rotateX(-90deg) translateZ(100px); 87 } 88 89 .container .box .cube_2{ 90 list-style: none; 91 width: 100px; 92 height: 100px; 93 position: absolute; 94 margin: -50px -50px; 95 perspective: 4000px; 96 transform-style: preserve-3d; 97 animation: an1 10s linear 0s infinite; 98 } 99 .container .box .cube_2 li{100 position: absolute;101 width: 100px;102 height: 100px;103 }104 .container .box .cube_2 li img{105 width: 100px;106 height: 100px;107 }108 .container .box .cube_2 li:nth-child(1){109 transform: rotateY(0deg) translateZ(50px);110 }111 .container .box .cube_2 li:nth-child(2){112 transform: rotateY(90deg) translateZ(50px);113 }114 .container .box .cube_2 li:nth-child(3){115 transform: rotateY(180deg) translateZ(50px);116 }117 .container .box .cube_2 li:nth-child(4){118 transform: rotateY(270deg) translateZ(50px);119 }120 .container .box .cube_2 li:nth-child(5){121 transform: rotateX(90deg) translateZ(50px);122 }123 .container .box .cube_2 li:nth-child(6){124 transform: rotateX(-90deg) translateZ(50px);125 }126 127 .container .box:hover .cube_1 li:nth-child(1){128 transform: rotateY(0deg) translateZ(200px);129 }130 .container .box:hover .cube_1 li:nth-child(2){131 transform: rotateY(90deg) translateZ(200px);132 }133 .container .box:hover .cube_1 li:nth-child(3){134 transform: rotateY(180deg) translateZ(200px);135 }136 .container .box:hover .cube_1 li:nth-child(4){137 transform: rotateY(270deg) translateZ(200px);138 }139 .container .box:hover .cube_1 li:nth-child(5){140 transform: rotateX(90deg) translateZ(200px);141 }142 .container .box:hover .cube_1 li:nth-child(6){143 transform: rotateX(-90deg) translateZ(200px);144 }145 </style>146 <body>147 <div class="container">148 <div class="box">149 <ul class="cube_1">150 <li><img src="../Img/1.jpg"></li>151 <li><img src="../Img/2.jpg"></li>152 <li><img src="../Img/3.jpg"></li>153 <li><img src="../Img/4.jpg"></li>154 <li><img src="../Img/5.jpg"></li>155 <li><img src="../Img/6.jpg"></li>156 </ul>157 <ul class="cube_2">158 <li><img src="../Img/7.jpg"></li>159 <li><img src="../Img/8.jpg"></li>160 <li><img src="../Img/9.jpg"></li>161 <li><img src="../Img/1.jpg"></li>162 <li><img src="../Img/2.jpg"></li>163 <li><img src="../Img/3.jpg"></li>164 </ul>165 </div>166 </div>167 </body>168 </html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。