-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
91 lines (91 loc) · 1.7 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
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-立方体</title>
<style>
.view{
width:200px;
height:200px;
margin: 200px auto;
perspective:500px;
perspective-origin:250px -50px;
}
@keyframes scroll{
100%{transform:rotate3d(1,1,1,360deg);}
}
.cube{
width:200px;
height:200px;
position:relative;
animation:scroll 2s linear 7s infinite;
transform-style:preserve-3d;
}
.item{
width:200px;
height:200px;
border:1px solid black;
font-size:160px;
text-align: center;
background-color: pink;
color:red;
opacity:0.8;
position:absolute;
}
@keyframes item1{
100%{transform:rotateY(-90deg);}
}
#item1{
z-index:6;
animation:item1 1s linear 1s both;
transform-origin:left;
}
@keyframes item2{
100%{transform:rotateY(90deg);}
}
#item2{
z-index:5;
animation:item2 1s linear 2s both;
transform-origin:right;
}
@keyframes item3{
100%{transform:rotateX(90deg);}
}
#item3{
animation:item3 1s linear 3s both;
transform-origin:top;
z-index:4;
}
@keyframes item4{
100%{transform:rotateX(-90deg);}
}
#item4{
animation:item4 1s linear 4s both;
transform-origin:bottom;
z-index:3;
}
@keyframes item5{
100%{transform:translateZ(200px);}
}
#item5{
animation:item5 1s linear 5s both;
z-index:2;
}
#item6{
z-index:1;
}
</style>
</head>
<body>
<div class="view">
<div class="cube">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
<div class="item" id="item3">3</div>
<div class="item" id="item4">4</div>
<div class="item" id="item5">5</div>
<div class="item" id="item6">6</div>
</div>
</div>
</body>
</html>