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

antzone發表於2017-03-11

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

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

[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實現的立體導航選單效果程式碼例項
2017-02-20
CSSS3
css3和js模擬翻頁效果程式碼例項
2017-04-13
CSSS3JS
css立體效果程式碼例項
2017-04-06
CSS
css3實現的div上下左右翻轉效果程式碼例項
2017-02-28
CSSS3
css3實現的折角效果程式碼例項
2017-03-03
CSSS3
js和css3實現的圖片立體滾動切換效果程式碼例項
2017-04-13
JSCSSS3
css3實現網狀球體效果程式碼例項
2017-02-20
CSSS3
jquery實現的分頁效果例項程式碼
2017-03-04
jQuery
css3實現的打折卡效果程式碼例項
2017-03-06
CSSS3
CSS3 實現的鐘表效果程式碼例項
2017-05-08
CSSS3
css3實現的毛玻璃效果程式碼例項
2017-02-28
CSSS3
css3實現的打字機效果程式碼例項
2017-02-21
CSSS3
css3實現的圓角效果程式碼例項
2017-02-19
CSSS3
css3實現的氣泡效果程式碼例項
2017-02-19
CSSS3
js實現的留言本效果程式碼例項
2017-04-02
JS
css3實現的文字下滑出現效果程式碼例項
2017-03-13
CSSS3
css3實現的斑馬紋效果程式碼例項
2017-03-24
CSSS3
CSS3實現的div圓角效果程式碼例項
2017-02-17
CSSS3
CSS3實現的div陰影效果程式碼例項
2017-02-17
CSSS3
css3實現的旋轉魔方效果程式碼例項
2017-02-26
CSSS3
css3實現的動態大白效果程式碼例項
2017-02-20
CSSS3
css3實現的文字陰影效果程式碼例項
2017-02-20
CSSS3
css3實現的多啦a夢效果程式碼例項
2017-02-22
CSSS3
CSS3實現的立方體3D滾動效果程式碼例項
2017-02-17
CSSS33D
css3立方體效果程式碼例項
2017-03-13
CSSS3
javascript實現的數字分頁效果程式碼例項
2017-03-16
JavaScript
jquery實現的通過左右方向鍵控制翻頁效果程式碼例項
2017-04-02
jQuery
jQuery和css3實現的開關效果程式碼例項
2017-04-18
jQueryCSSS3
css3實現的邊框陰影效果程式碼例項
2017-02-26
CSSS3
css3實現的動物頭像效果程式碼例項
2017-02-22
CSSS3
css3實現的皮球上下彈動效果程式碼例項
2017-02-23
CSSS3
css3實現button按鈕美化效果程式碼例項
2017-04-02
CSSS3
css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項
2017-02-17
CSSS3
CSS3 文字立體翻轉效果
2017-05-04
CSSS3
CSS3立體導航選單程式碼例項
2018-05-23
CSSS3
css3實現旋轉的太極圖效果程式碼例項
2017-02-22
CSSS3
css實現的網頁三列布局效果程式碼例項
2017-03-30
CSS網頁
css3實現div邊框陰影效果程式碼例項
2017-03-06
CSSS3

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

相關文章