如何实现翻书效果在一些小说站中经常应用，其实实现起来也很简单，下面是用网页设计

实现翻书效果。

！声明文档类型

超文本标记语言

头

meta charset='utf-8' /

标题/头衔

风格

body{

隐藏飞越：

边距：0；

padd : 0；

}

#书{

位置：

左侧： 50%;

前：名50%；

边距-左侧：-325 px；

页边距-顶部：-300像素；

高度： 600px

宽度： 750 px

transform-style : preserve-3d；

变换：透视(1000像素)旋转(60度)旋转(0度)；

transition: 1s

}

#book:hover{

变换：透视(1000像素)旋转(0度)旋转(0度)；

}

#图书分类{

高度： 600px

宽度： 750 px

文本-对齐：中心；

线高： 600 px

位置：

左： 0；

top : 0；

变换原点向左：

transition: 1s

}

# book div : of-of-type(odd){

背景：橙色；

}

# book div :n-of-type(偶数){

背景：黄色；

}

#book:after{

内容： " "；

位置：

宽度： 600 px

高度： 5px

background: rgba(0，0，0，0.8)；

left:75px

z-索引：-2;

底部：-10px；

边界半径： 70%;

框影： 0px 0px 25px 15px rgba(0，0，0，0.8)；

}

/style

脚本

window.onload=function(){

var book=文档。getelementbyid(' book ')；

var pages=book。getelementsbytagname(' div ')；

var pageNumber=4，rota=-180；

book.onclick=function(){

书。风格。left=' 65% '；

页数[页码]。风格。transform=' Rotary '(' Rotarde ')'；

页码-;

rota=10

if(页码0){

for(var I=0；ipages.lengthi ){

第[I]页。风格。transform=' Rotary(0)'；

}

书。风格。左=' 50% '；

页码=4;

rota=-180；

}

}

}

/script

/head

身体

div id='book '

div5/div

div4/div

div3/div

div2/div

div1/div

/div

/body

/html