今天咱们来说一下,CSS中的3D效果

.如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦!

很好,话不多说,翠花'上代码':

<!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>