css3 transform及原生js实现鼠标拖动3D立方体旋转

CSS代码块：

1.   
2.  body{cursor: url("img/openhand1.png"),auto;}   
3.      .big_box{   
4.             width: 500px;   
5.             height: 500px;   
6.             margin: 200px auto;   
7.         }   
8.   
9.         .box{   
10.             -webkit-transform-style: preserve-3d;   
11.             -moz-transform-style: preserve-3d;   
12.             -ms-transform-style: preserve-3d;   
13.             transform-style: preserve-3d;   
14.             transform-origin:100px 100px 00px;   
15.             position: relative;   
16.             transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);   
17.         }   
18.         .box span{   
19.             transition: all 1s linear;   
20.   
21.         }   
22.         span{   
23.             display: block;   
24.             position: absolute;   
25.             width: 200px;   
26.             height: 200px;   
27.             box-sizing: border-box;   
28.             border:1px solid #999;   
29.               
30.             text-align: center;   
31.             line-height: 200px;   
32.             font-size: 60px;   
33.             font-weight: 700;   
34.             border-radius: 12%;   
35.   
36.         }   
37.         .box span:nth-child(1){   
38.             background-color: deepskyblue;   
39.             transform-origin: left;   
40.             transform: rotatey(-90deg) translatex(-100px);//左   
41.         }   
42.         .box span:nth-child(2){   
43.             background-color: red;   
44.             transform-origin: rightright;   
45.             transform: rotatey(90deg) translatex(100px) ;//右   
46.   
47.         }   
48.   
49.         .box span:nth-child(3){   
50.             background-color: green;   
51.             transform-origin: top;   
52.             transform: rotatex(90deg) translatey(-100px) ;//上   
53.   
54.         }   
55.         .box span:nth-child(4){   
56.             background-color: #6633FF;   
57.             transform-origin: bottombottom;   
58.             transform: rotatex(-90deg) translatey(100px);//下   
59.         }   
60.         .box span:nth-child(5){   
61.             background-color: gold;   
62.             transform: translatez(-100px);//后   
63.         }   
64.         .box span:nth-child(6){   
65.   
66.             background-color: #122b40;   
67.             transform: translatez(100px);//前   
68.         }   
69.         .box:hover span{   
70.   
71.             opacity: 0.3;   
72.         }   
73.         .box:hover{   
74.             animation-play-state:paused;//设置动画暂停   
75.         }   
76.     

JS代码块：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。