纯html+css3翻书效果

1、新建html文档。

2、书写hmtl代码。

<div class="book preserve-3d">

<!-- 书的最后一页 -->

<div class="book-page-box book-page-4 preserve-3d">

<div class="book-page page-front">

<p>第三页</p>

</div>

</div>

<!-- 书的第三页 -->

<div class="book-page-box book-page-3 preserve-3d flip-animation-3">

<div class="book-page page-front">

<p>第二页</p>

</div>

</div>

<!-- 书的第二页 -->

<div class="book-page-box book-page-2 preserve-3d flip-animation-2">

<div class="book-page page-front">

<p>第一页</p>

</div>

</div>

<!-- 书的封面 -->

<div class="book-page-box book-page-1 preserve-3d flip-animation-1">

<div class="book-page page-front">

<p>

翻页特效

<br>

flip-book

</p>

</div>

</div>

</div>

3、初始化css代码。

<style>

* { margin: 0; padding: 0 }

html { overflow-y: scroll }

body, h1, h2, h3, p, div, dl, dt, dd, ul, ol, li, table, th, td, form, button, input, textarea, legend, hr { padding: 0; margin: 0 }

body { padding: 0; margin: 0;  color: #333; font: 12px/18px "微软雅黑", arial; height: 100% }

button, input, select, textarea { font-size: 100% }

textarea { font: 14px/20px "微软雅黑" }

button { border: 0 }

li { list-style: none }

img { border: 0; }

a { color: #06c; text-decoration: none; cursor: pointer; outline: none; hide-focus:expression(this.hideFocus = true);}

a:hover { color: #06c; text-decoration: underline }

.left{ float:left;}

.right{ float:right;}

.clear:after,ul:after{content:"";display:block;visibility:hidden;height:0;clear:both;}

.clear,.area,.con:after{zoom:1}

</style>

4、书写css代码。

.book { position: absolute; top: 50%; left: 50%; margin-top: -150px; width: 300px; height: 300px; background-color: #fff; -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); transform: rotateX(30deg); }

.preserve-3d { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }

.book-page { position: absolute; top: 0; left: 0; width: 300px; height: 300px; border: 1px solid #1976D2; text-align: center; }

.book-page-box { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }

@keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

 @-moz-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-webkit-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-o-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-moz-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-webkit-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-o-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-moz-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-webkit-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

@-o-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}

.book-page-1 .page-front { background-color: #1976D2; }

.book-page-1 .page-back { background-color: #fff; }

.book-page-1 .page-front p { font-size: 30px; color: #fff; margin-top: 100px; }

.flip-animation-1 { animation: flipBook1 17s; -moz-animation: flipBook1 17s; /* Firefox */ -webkit-animation: flipBook1 17s; /* Safari and Chrome */ -o-animation: flipBook1 17s; }

/*书的第二页*/

.book-page-2 .page-back, .book-page-2 .page-front { background-color: #fff; }

.book-page-2 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }

.flip-animation-2 { animation: flipBook2 13s 2s; -moz-animation: flipBook2 13s 2s; /* Firefox */ -webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */ -o-animation: flipBook2 13s 2s; }

/*书的第三页*/

.book-page-3 .page-back, .book-page-3 .page-front { background-color: #fff; }

.book-page-3 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }

.flip-animation-3 { animation: flipBook3 10s 3s; -moz-animation: flipBook3 10s 3s; /* Firefox */ -webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */ -o-animation: flipBook3 10s 3s; }

/*书的第四页*/

.book-page-4 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }

5、代码整体结构。

6、查看效果。