-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy path3DSquare.html
61 lines (60 loc) · 1.35 KB
/
3DSquare.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/3DSquare.css"/>
</head>
<body>
<ul id="squareContainer">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var squareContainer = document.getElementById("squareContainer");
var body = document.getElementsByTagName('body')[0];
var startX=0,
startY=0
moveX=0,
moveY=0,
endX=0,
endY=0;
var squareController = function(){};
squareController.methods = function(){
return {
move:function(){
body.onmousedown = function(ev){
var e = ev||event;
startX = e.clientX;
startY = e.clientY;
console.log('click')
body.onmousemove = function(ev){
var e = ev||event;
moveX = e.clientX-startX+endX;
moveY = e.clientY-startY+endY;
squareContainer.style.transform = 'rotateY('+moveX+'deg) rotateX('+(-moveY)+'deg)';
console.log('move')
body.onmouseup = function(){
body.onmousemove = null;
endX = moveX;
endY = moveY;
}
}
return false;
}
},
init:function(){
this.move();
},
}
}();
squareController.methods.init();
}
</script>
</html>