-
Notifications
You must be signed in to change notification settings - Fork 28
/
ball.html
77 lines (66 loc) · 2.33 KB
/
ball.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.scene{
width:70%;height:150px;border:1px solid red;
margin:auto;position: fixed;
left:0;top:0;right:0;bottom: 0;
perspective: 1200px;
}
.ball{
position: absolute;
left:0;top:0;width:100%;height:100%;
transform-style: preserve-3d;
}
</style>
<script>
window.onload=function(){
var ball=document.getElementsByClassName("ball")[0];
var radius=500;
/*
* 坐标转换的问题
* */
for(var i=0;i<10;i++){
var x=radius*Math.sin(Math.PI/2)*Math.cos(i*36*Math.PI/180);
var z=radius*Math.sin(Math.PI/2)*Math.sin(i*36*Math.PI/180);
var y=radius*Math.cos(Math.PI/2);
var angle=Math.atan2(x,z);
var div=document.createElement("div");
div.style.cssText="width:200px;height:100px;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;background:red;";
div.style.transform="translate3d("+x+"px,"+y+"px,"+z+"px) rotateY("+angle+"rad)";
ball.appendChild(div);
}
var cx=document.documentElement.clientWidth/2
var cy=document.documentElement.clientHeight/2
document.onmousedown=function(e){
var startx= e.clientX;
var starty= e.clientY;
document.onmousemove=function(e){
var movex= e.clientX;
var movey= e.clientY;
var angel=Math.sqrt(Math.pow((movex-startx),2)+Math.pow((movey-starty),2));
var endx=movex-cx;
var endy=movey-cy;
var mo=Math.sqrt(endx*endx+endy*endy);
var x=endx/mo;
var y=endy/mo;
ball.style.transform="rotate3d("+-y+","+x+",0,"+angel+"deg)";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</head>
<body>
<div class="scene">
<div class="ball">
</div>
</div>
</body>
</html>