Heim >Web-Frontend >H5-Tutorial >Machen Sie sich mit dem 3D-Effekt in CSS vertraut

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

零下一度Original: 2017-06-28 10:36:291519Durchsuche

---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':

 <!DOCTYPE html> 2 
 <html> 3 <head> 4     
 <meta charset="UTF-8"> 5     
 <title>ITandYT</title> 6     
 <style type="text/css"> 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 </head>63 <body>64 <div id="box">65     
 <div><img src="010.jpg"/></div>66     <div><img src="010.jpg"/> </div>67     <div><img src="010.jpg"/> </div>68     
 <div><img src="010.jpg"/> </div>69     <div><img src="010.jpg"/> </div>70     <div><img src="010.jpg"/> </div>
 </div>72 73 <script type="text/javascript">74 75     // 获取元素76     
 var oDiv = document.querySelector('#box');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 = 'perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'90         }91         
 document.onmouseup = function(){92             
 document.onmousemove = null;93         }94         
 return false;95     }96 97 </script>
 </body> 
  </html>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie soll ich Angular2 lernen?Nächster Artikel：Wie soll ich Angular2 lernen?

In Verbindung stehende Artikel

Mehr sehen