css3實現的書本立體翻頁效果程式碼例項

antzone發表於2017-03-11

原文網址 : https://www.softwhy.com/article-2926-1.html

分享一段程式碼例項，他實現了書本立體翻頁效果。

能夠自動模擬現實中書本翻頁的效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
body, html {
  height: 100%;
}
body {
  /*
    perspective 屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產生透視效果。
    z>0的三維元素比正常大，而z<0時則比正常小，大小程度由該屬性的值決定。
    預設情況下，消失點位於元素的中心，但是可以通過設定perspective-origin屬性來改變其位置。
  */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
  background-color: #212121;
  font-family: '微軟雅黑';
}
.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 {
  /*transform-style屬性指定了，該元素的子元素是（看起來）位於三維空間內，還是在該元素所在的平面內被扁平化。*/
  -webkit-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);
  }
}
/* Firefox */
@-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);
  }
}
/* Safari and Chrome */
@-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);
  }
}
/* Opera */
@-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);
  }
}
/* Firefox */
@-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);
  }
}
/* Safari and Chrome */
 @-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);
  }
}
/* Opera */
@-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);
  }
}
/* Firefox */
@-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);
  }
}
/* Safari and Chrome */
@-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);
  }
}
/* Opera */
@-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; /* Opera */
}
/*書的第二頁*/
.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; /* Opera */
}
/*書的第三頁*/
.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; /* Opera */
}
/*書的第四頁*/
.book-page-4 .page-front p {
  font-size: 30px;
  color: #1976D2;
  margin-top: 100px;
}
</style>
</head>
<body>
  <!-- 書的主體 -->
  <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>
</body>
</html>

css3水滴效果程式碼例項
2018-06-04
CSSS3
CSS3立體導航選單程式碼例項
2018-05-23
CSSS3
css3晃動效果程式碼例項
2018-07-09
CSSS3
CSS3心形效果程式碼例項
2018-07-09
CSSS3
CSS3旋轉效果程式碼例項
2018-05-21
CSSS3
CSS3滑過光束效果程式碼例項
2018-07-12
CSSS3
CSS3小黃人效果程式碼例項
2018-07-08
CSSS3
css3折角效果程式碼例項
2018-05-28
CSSS3
CSS3梯形效果程式碼例項
2018-05-28
CSSS3
CSS3背景漸變效果程式碼例項
2018-05-22
CSSS3
CSS3星系運動效果程式碼例項
2018-07-03
CSSS3
div前後翻轉效果程式碼例項
2018-05-25
使用transform製作書本翻頁效果
2020-11-06
ORM
CSS3文字凹凸效果程式碼例項
2018-05-23
CSSS3
html實現簡單ListViews效果的例項程式碼
2020-05-20
HTMLView
CSS3文字陰影效果程式碼例項
2018-07-16
CSSS3
CSS3卡通形象程式碼例項
2018-05-22
CSSS3
CSS3現菱形效果程式碼
2018-07-22
CSSS3
jQuery tab選項卡效果程式碼例項
2018-08-05
jQuery
canvas載入效果程式碼例項
2018-07-09
Canvas
CSS橢圓效果程式碼例項
2018-06-02
CSS
html and css3 js製作翻頁書效果id1099-網頁前端設計
2020-10-13
HTMLCSSS3JS網頁前端
CSS3發光背景程式碼例項
2018-05-22
CSSS3
CSS3紙飛機程式碼例項
2018-06-02
CSSS3
Python實現簡單網頁圖片抓取完整程式碼例項
2020-05-27
Python網頁
CSS3 文字立體凸起效果
2019-01-18
CSSS3
美化滾動條效果程式碼例項
2018-07-11
canvas原型鐘錶效果程式碼例項
2018-05-27
Canvas原型
css背景虛化效果程式碼例項
2018-05-31
CSS
canvas氣泡上浮效果程式碼例項
2018-03-19
Canvas
CSS3具有3D立體效果的數字分頁
2018-07-03
CSSS33D
OneClock的翻頁時鐘效果是如何實現的
2019-03-02
CSS3圖層陰影程式碼例項
2018-07-16
CSSS3
Android自定義View——從零開始實現書籍翻頁效果（二）
2019-03-04
AndroidView
ul>li*3 實現翻書動畫效果
2019-03-01
動畫
HTML 使用表單標籤實現註冊頁面的例項程式碼
2018-12-03
HTML
127 PHP獲取網頁標題的3種實現方法程式碼例項
2018-09-12
PHP網頁
jQuery點選滑出層效果程式碼例項
2018-07-12
jQuery
當前文字框高亮效果程式碼例項
2018-05-25

css3實現的書本立體翻頁效果程式碼例項

相關文章