-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
81 lines (81 loc) · 1.79 KB
/
test.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
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes mymove{
0% {transform:rotateZ(45deg) rotate3d(1,1,0,0deg);}
100% {transform:rotateZ(45deg) rotate3d(1,1,0,360deg);}
}
#display{
/* transform-style:preserve-3d;
height: 100px;
width: 100px;
transform-origin:50% 50% -50px;
animation:mymove 2s 0s infinite normal;*/
top: 800px;
left: 300px;
position: relative;
width: 100px;
height: 100px;
}
#display div{
opacity: 0.6;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
/* backface-visibility:visible;*/
box-sizing:border-box;
}
#display div:nth-child(1){
border:2px red solid;
padding: 50px;
/*transform:translateZ(-100px);*/
}/*
#display div:nth-child(2){
border:2px orange solid;
transform:translate3d(-50px,0,-50px) rotateY(90deg);
}
#display div:nth-child(3){
border:2px yellow solid;
transform:translate3d(50px,0,-50px) rotateY(-90deg);
}
#display div:nth-child(4){
transform:translate3d(0,-50px,-50px) rotateX(90deg);
border:2px green solid;
}
#display div:nth-child(5){
transform:translate3d(0,50px,-50px) rotateX(-90deg);
border:2px blue solid;
}
#display div:nth-child(6){
border:2px purple solid;
}*/
</style>
</head>
<body>
<div>
<div id="display">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<form>
<img id="img1">
</form>
<script type="text/javascript">
var dis=document.getElementById("display");
document.body.onclick=function(event){
console.log(event.offsetX);
};
document.getElementById("img1").src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png"
</script>
</body>
</html>