纯html+css3翻书效果

新建html文档。

书写hmtl代码。

初始化css代码。

书写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; }

代码整体结构。

查看效果。