html5小说翻页,用html5模拟书的翻页

//样式

.d3{

transform-origin: 0% 0%;

60px;height: 80px;

position: relative;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

opacity: 0.5;

}

#book:hover > #book1{

transform: rotateY(-180deg);

transition-duration: 1.0s;

}

#book:hover> #book2{

transform: rotateY(-170deg);

transition-duration: 1.2s;

}

#book:hover> #book3{

transform: rotateY(-160deg);

transition-duration: 1.4s;

}

#book:hover> #book4{

transform: rotateY(-150deg);

transition-duration: 1.6s;

}

#book:hover> #book5{

transform: rotateY(-140deg);

transition-duration: 1.8s;

}

//定义六页纸