html css静态翻页效果,WEB前端CSS翻页效果

/p>

<

Document

margin: 0;

padding: 0;

}

space {

perspective: 800px;

perspective-origin: 50% 50%;

overflow: hidden;

}

#main {

transform-style: preserve-3d;

width: 320px;

height: 370px;

position: relative;

margin: auto;

}

.page {

width: 300px;

height: 350px;

position: absolute;

padding: 10px;

background-color: #000;

color: #fff;

line-height: 350px;

font-size: 300px;

text-align: center;

}

#page1 {

transition: transform 1s linear;

transform-origin: bottom;

}

#page2,

#page3,

#page4,

#page5,

#page6,

#page7,

#page8 {

transform: rotateX(90deg);

transition: transform 1s linear;

transform-origin: bottom;

}

#btn a {

font-size: 20px;

text-decoration: none;

}

#btn {

width: 100px;

margin: 100px auto;

position: relative;

}

window.onload = function () {

var next = document.getElementById(‘next’);

var prev = document.getElementById(‘prev’);

var num = 1;

prev.onclick = function () {

if (num == 1) {

return;

}

var page = document.getElementById(‘page’ + num);

page.style.transform = ‘rotateX(90deg)’;

num–;

console.log(num);

var page1 = document.getElementById(‘page’ + num);

page1.style.transform = ‘rotateX(0deg)’;

}

next.onclick = function () {

if (num == 8) {

return;

}

var page = document.getElementById(‘page’ + num);

page.style.transform = ‘rotateX(-90deg)’;

num++;

console.log(num);

var page1 = document.getElementById(‘page’ + num);

page1.style.transform = ‘rotateX(0deg)’;

}

}

1

2

3

4

5

6

7

8

next

prev