CSS3,transform3D立体可拖拽正方体实现原理
.如果你把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="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>
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>
