2. 3d场景
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .wrapper{
8 -webkit-prespective: 800;
9 -webkit-perspective-origin: 50% 50%; 创建3d可视窗口，800是深度，50%，50%是视角
10 }
11 .content{
12 width: 300px;
13 height: 300px; 宽高若不与正方体的宽高一致，正方体转动是会被div所挡住，改变位置。且会出现bug
14 top: 150px;
15 -webkit-transform-style: preserve-3d; 告诉浏览器下面的transform是3d的
16 position: relative; 包含的div是绝对定位
17 margin: 0 auto;
18 -webkit-transition: -webkit-transform .6s; 过渡动画
19
20 }
21 .swq{
22 width: 300px;
23 height: 300px;
24 background: #584C56;
25 color: white;
26 text-align: center;
27 font-size: 110px;
28 line-height: 300px;
29 height: 300px;
30 position: absolute;
31
32
33 }
34
35 #swq1{ div排布，右手定则判断坐标系
36 -webkit-transform: translateZ(150px);
37
38 }
39 #swq2{
40 -webkit-transform: translateX(150px) rotateY(90deg);
41 }
42 #swq3{
43 -webkit-transform: translateZ(-150px) rotateX(-180deg);
44
45 }
46 #swq4{
47 -webkit-transform: translateX(-150px) rotateY(-90deg);
48 }
49 #swq5{
50 -webkit-transform: translateY(-150px) rotateX(90deg);
51
52 }
53
54 #swq6{
55 -webkit-transform: translateY(150px) rotateX(90deg);
56 }
57
58 </style>
59 </head>
60 <body>
61 <div class="wrapper">
62 <div class="content" id="yu">
63 <div id="swq1" class="swq">1</div>
64 <div id="swq2" class="swq">2</div>
65 <div id="swq3" class="swq">3</div>
66 <div id="swq4" class="swq">4</div>
67 <div id="swq5" class="swq">5</div>
68 <div id="swq6" class="swq">6</div>
69 </div>
70 <button id="button1" onclick="push(this)">上</button>
71 <button id="button2" onclick="push(this)">下</button>
72 <button id="button3" onclick="push(this)">左</button>
73 <button id="button4" onclick="push(this)">右</button>
74 </div>
75 <script type="text/javascript">
76
77 var obj;
78 var re=0;
79 var de=0;
80 function push(obj){
81 var yu=document.getElementById(‘yu‘);
82 switch(obj.id){
83 case(‘button1‘):
84 re=re+90;
85 yu.style.webkitTransform="rotateX("+re+"deg)";
86 break;
87 case(‘button2‘):
88 re=re-90;
89 yu.style.webkitTransform=‘rotateX(‘+re+‘deg)‘;
90 break;
91 case(‘button3‘):
92 de=de+90;
93 yu.style.webkitTransform=‘rotateY(‘+de+‘deg)‘;
94 bdeak;
95 case(‘button4‘):
96 de=de-90;
97 yu.style.webkitTransform=‘rotateY(‘+de+‘deg)‘;
98 break;
99 }
100 }
101
102 </script>
103 </body>
104 </html>原文：http://www.cnblogs.com/forgere/p/5152066.html