溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中實現(xiàn)3D效果的示例

發(fā)布時間：2021-01-25 10:24:28 來源：億速云 閱讀：209 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中實現(xiàn)3D效果的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

CSS中的3D效果

具體代碼:

 <!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             /*給父級設(shè)置3d空間*/14             
 transform-style: preserve-3d;15             /*設(shè)置景深*/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>

圖片沒有的話就其他的代替哦!

以上是“css中實現(xiàn)3D效果的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手