CSS3,transform3D立体可拖拽正方体实现原理

---恢复内容开始---

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

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

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

 1 <!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     }19 20     #box div{21       width: 100%;22       height: 100%;23       border: 1px solid black;24       position: absolute;25       opacity: 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='/images/loading.gif' data-original="010.jpg"/></div>66   <div><img src='/images/loading.gif' data-original="010.jpg"/> </div>67   <div><img src='/images/loading.gif' data-original="010.jpg"/> </div>68   <div><img src='/images/loading.gif' data-original="010.jpg"/> </div>69   <div><img src='/images/loading.gif' data-original="010.jpg"/> </div>70   <div><img src='/images/loading.gif' data-original="010.jpg"/> </div>71 </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>98 </body>99 </html>

图片没有的话就其他的代替哦!

是不是很简单,你学会了吗???没学会也不要紧,直接把本上神的复制走吧!绝对能用哦!

纯熟原创,禁止未经允许私自转载!

---恢复内容结束---

原标题：CSS3,transform3D立体可拖拽正方体实现原理

关键词：CSS