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

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

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

  2   3  4       5      ITandYT 6       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     62 63 64 65      
66      
67      
68       
69      
70      
 
72 73 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