Skip to content

Commit c80a782

Browse files
author
gong
committed
build
0 parents  commit c80a782

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎transition.html

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>transition</title>
6+
<style type="text/css">
7+
.box {
8+
width: 200px;
9+
height: 200px;
10+
background: blue;
11+
margin: 20px auto;
12+
transition: width 3s, background 3s;
13+
}
14+
.box:hover {
15+
background: red;
16+
width: 400px;
17+
}
18+
.experiment {
19+
-webkit-perspective: 800;
20+
-webkit-perspective-origin: 50% 50%;
21+
-webkit-transform-style: preserve-3d;
22+
}
23+
.block {
24+
width: 800px;
25+
height: 800px;
26+
background-color: #69c;
27+
margin: 10px auto;
28+
transform: rotateX(45deg);
29+
}
30+
31+
#my3dspace {
32+
-webkit-perspective: 800;
33+
-webkit-perspective-origin: 50% 50%;
34+
overflow: hidden;
35+
}
36+
#pagegroup {
37+
width: 400px;
38+
height: 400px;
39+
margin: 0 auto;
40+
-webkit-transform-style: preserve-3d;
41+
position: relative;
42+
}
43+
.page {
44+
width: 300px;
45+
height: 360px;
46+
padding: 20px;
47+
background-color: black;
48+
color: #fff;
49+
font-weight: bold;
50+
font-size: 360px;
51+
line-height: 360px;
52+
text-align: center;
53+
position: absolute;
54+
55+
}
56+
.page1 {
57+
transform-origin: bottom;
58+
transition: transform 1s linear;
59+
}
60+
.page2,
61+
.page3,
62+
.page4,
63+
.page5 {
64+
transform-origin: bottom;
65+
transition: transform 1s linear;
66+
transform: rotateX(90deg);
67+
}
68+
#op {
69+
text-align: center;
70+
margin: 40px auto;
71+
}
72+
73+
</style>
74+
</head>
75+
<body>
76+
<div class="experiment">
77+
<div class="block">
78+
79+
</div>
80+
</div>
81+
<div class="box"></div>
82+
<div id="my3dspace">
83+
<div id="pagegroup">
84+
<div class="page page1">1</div>
85+
<div class="page page2">2</div>
86+
<div class="page page3">3</div>
87+
<div class="page page4">4</div>
88+
<div class="page page5">5</div>
89+
</div>
90+
</div>
91+
<div id="op">
92+
<a href="javascript:;" class="prev">prev</a>
93+
<a href="javascript:;" class="next">next</a>
94+
</div>
95+
<script type="text/javascript">
96+
var page = {
97+
curIndex: 1,
98+
curPage: function () {
99+
return document.querySelector('.page' + this.curIndex);
100+
},
101+
nextPage: function () {
102+
return document.querySelector('.page' + (this.curIndex + 1));
103+
},
104+
prevPage: function () {
105+
return document.querySelector('.page' + (this.curIndex - 1));
106+
},
107+
init: function () {
108+
this.bindEvent()
109+
},
110+
bindEvent: function () {
111+
var _this = this;
112+
var next = document.querySelector('.next');
113+
next.addEventListener('click', function() {
114+
_this.next();
115+
}, false);
116+
117+
var prev = document.querySelector('.prev');
118+
prev.addEventListener('click', function() {
119+
_this.prev();
120+
}, false)
121+
122+
},
123+
next: function() {
124+
if (this.curIndex === 5) return;
125+
this.curPage().style.transform = 'rotateX(-90deg)';
126+
127+
this.nextPage().style.transform = 'rotateX(0deg)';
128+
this.curIndex++;
129+
130+
},
131+
prev: function() {
132+
if (this.curIndex === 1) return;
133+
this.curPage().style.transform = 'rotateX(90deg)';
134+
this.prevPage().style.transform = 'rotateX(0deg)';
135+
this.curIndex--;
136+
137+
}
138+
}
139+
page.init();
140+
</script>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)