Machen Sie sich mit dem 3D-Effekt in CSS vertraut

---Beginnen Sie mit der Wiederherstellung von Inhalten---

Heute werden wir über den 3D-Effekt in CSS sprechen

Wenn Sie die Transformation wirklich beherrschen und kompetent sind, können Sie erstellen Viele coole Effekte können direkt über CSS erstellt werden. Morgen werden wir darüber sprechen, wie man CSS zum Erstellen von Karussellbildern verwendet.

Sehr gut, ohne Umschweife. Cuihuas 'Code':

 nbsp;html> 2 
  3  4     
 <meta> 5     
 <title>ITandYT</title> 6     
 <style> 7         
 #box{ 8             width: 200px; 9             
 height: 200px;10             margin: 200px auto;11             
 position: relative;12 13             /*给父级设置3d空间*/14             
 transform-style: preserve-3d;15             /*设置景深*/16             
 /*perspective: 800px;*/17             
 transform: perspective(8000px) rotateY(-60deg) rotateX(30deg);18         }         
 #box div{21             width: 100%;22             height: 100%;23             
 border: 1px solid black;24             position: absolute;25             
 pacity: 0.7;26         }27         /*前面*/28         
 #box div:nth-child(1){29             background: palegreen;30             
 transform: translateZ(100px);31         }32         /*后面*/33         
 #box div:nth-child(2){34             background: palevioletred;35             
 transform: translateZ(-100px);36         }37         /*左面*/38         
 #box div:nth-child(3){39             background: plum;40            
 transform: translateX(-100px) rotateY(90deg);41         }42         /*右面*/43         
 #box div:nth-child(4){44             background: peru;45             
 transform: translateX(100px) rotateY(90deg);46         }47         /*上面*/48         
 #box div:nth-child(5){49             background: palegoldenrod;50             
 transform: translateY(-100px) rotateX(90deg);51         }52         /*下面*/53         
 #box div:nth-child(6){54             background: paleturquoise;55             
 transform: translateY(100px) rotateX(90deg);56         }57         img{58             
 width:200px;59             height: 100%;60         }61     </style>62 63 64 <div>65     
 <div><img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" ></div>66     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" > </div>67     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" > </div>68     
 <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" > </div>69     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" > </div>70     <div>
<img  src="/static/imghwm/default1.png" data-src="010.jpg" class="lazy" alt="Machen Sie sich mit dem 3D-Effekt in CSS vertraut" > </div>
 </div>72 73 <script>74 75     // 获取元素76     
 var oDiv = document.querySelector(&#39;#box&#39;);77     var x = 30;78     
 var y = -60;79     oDiv.onmousedown = function(ev){80         
 var event = window.event || ev;81         
 var disY = event.clientX - y;82         
 var disX = event.clientY - x;83 84         
 document.onmousemove = function(ev){85             
 var event = window.event || ev;86             
 // 计算偏移角度87             x = event.clientY - disX;88             
 y = event.clientX - disY;89             
 oDiv.style.transform = &#39;perspective(800px) rotateY(&#39;+y+&#39;deg) rotateX(&#39;+x+&#39;deg)&#39;90         }91         
 document.onmouseup = function(){92             
 document.onmousemove = null;93         }94         
 return false;95     }96 97 </script>
  
  

Wenn kein Bild vorhanden ist, ersetzen Sie es einfach durch ein anderes!

Ist das nicht sehr einfach, haben Sie es gelernt? Es ist egal, wenn nicht, es wird auf jeden Fall funktionieren!

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit dem 3D-Effekt in CSS vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!