-
Notifications
You must be signed in to change notification settings - Fork 3
/
box.html
42 lines (41 loc) · 1.46 KB
/
box.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d旋转的立体小方块</title>
<style>
#my3dspace{ margin-top:20px;-webkit-perspective:800;-webkit-perspective-origin: 50% 50%;}
#pagegroup{ width:200px; height:200px; position:relative;-webkit-transform-style:preserve-3d; margin-top:200px;}
.page{ width:158px; height:158px; padding:20px;color:#fff; font-size:158px; line-height:158px; text-align:center; position:absolute; border:1px solid #fff; background:black;}
#page1{}
#page2{-webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}
#page3{-webkit-transform-origin:left; -webkit-transform:rotateY(90deg);}
#page4{-webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);}
#page5{-webkit-transform-origin:bottom; -webkit-transform:translateZ(-200px);}
#page6{-webkit-transform-origin:top; -webkit-transform:rotateX(-90deg);}
</style>
<script type="text/javascript">
var timer=null;
var i=0;
function autoPlay(){
i++;
document.getElementById("pagegroup").style.webkitTransform= "rotateX("+i+"deg) rotateY("+i+"deg) rotateZ("+i+"deg)";
}
timer=setInterval(autoPlay,20);
</script>
</head>
<body>
<center>
<div id="my3dspace">
<div id="pagegroup">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
</div>
</div>
</center>
</body>
</html>