本教程給大家帶來一個非常有創意的翻書效果，使用的是css 3D transforms屬性和css transitions屬性。這里將給你展示兩種不同的圖書設計：精裝書和平裝書。這兩種設計只需要簡單的改變一些css樣式、圖片和其他一些小細節就可以完成。

注意: 并不是所有的瀏覽器都支持這些css屬性。

精裝書:

精裝書由三個部分組成：書的封面、書的脊柱和書的背面。每一個部分都將由偽元素來提供一些厚度。

平裝書:

相對于精致書來說，平裝書的設計要簡單一些。它由一些平面紙組成，沒有書的脊柱，只有書的封面、內頁和書的背面。

鼠標hover效果

兩種書的效果都使用“hover on”和“hover off”來實現過渡效果。“hover on”的樣式都定義在書的:hoverclass上，而“hover off”的樣式則定義在最先聲明的元素的class上。不明白？接著往下看。

Hover on

當我們打開書的時候，書的封面的z-index從100改變到0，為了達到一種平滑過渡的效果，書的內頁分別定義把不同的過渡時間。

.book:hover > .hardcover_front {

transform: rotateY(-145deg) translateZ(0);

z-index: 0;

}

.book:hover > .page li:nth-child(1) {

transform: rotateY(-30deg);

transition-duration: 1.5s;

}

.book:hover > .page li:nth-child(2) {

transform: rotateY(-35deg);

transition-duration: 1.8s;

}

.book:hover > .page li:nth-child(3) {

transform: rotateY(-118deg);

transition-duration: 1.6s;

}

.book:hover > .page li:nth-child(4) {

transform: rotateY(-130deg);

transition-duration: 1.4s;

}

.book:hover > .page li:nth-child(5) {

transform: rotateY(-140deg);

transition-duration: 1.2s;

}

Hover off

當我們關書的時候，為了避免內頁和封面產生重疊，我們可以減少頁面的過渡時間。

.hardcover_front{

transition: all 0.8s ease, z-index 0.6s;

}

.page > li {

width: 100%;

height: 100%;

transform-origin: left center;

transition-property: transform;

transition-timing-function: ease;

}

.page > li:nth-child(1) {

transition-duration: 0.6s;

}

.page > li:nth-child(2) {

transition-duration: 0.6s;

}

.page > li:nth-child(3) {

transition-duration: 0.4s;

}

.page > li:nth-child(4) {

transition-duration: 0.5s;

}

.page > li:nth-child(5) {

transition-duration: 0.6s;

}

封面設計

這個demo中的封面設計非常簡單，精裝書只是添加了一個coverDesign的class，并且用::after偽類為書添加一些背景和圖片

.coverDesign {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

overflow: hidden;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden;

}

.coverDesign::after {

background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);

background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);

background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

平裝書則是使用了一個img來做封面。

最后為它們添加一些好看的ribbon效果。

總結

以上是生活随笔為你收集整理的html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。