整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，今天跟大家分享的是CSS3動態日記翻頁效果的實現方法，老規矩，先看效果
翻開效果
閉合效果
接下來講解具體操作步驟，相信觀看過小編前幾期教程的同學應該對CSS3的“rotate”屬性都不陌生，在輪播圖那期我們已經初步體驗來它的效果，這一期主要用到的還是這個旋轉屬性。
最外層的div(.book)主要用來調控日記本在頁面的位置和添加一些立體效果；第二層div(.page-box-n)用來設置翻頁效果；最里面的div(.page-n)用來設置具體每一頁的樣式。有一點要注意的是在HTML中頁面的順序是從后向前排列，這樣后面用絕對定位將他們浮在一起時才會按正常順序前后排列（可參考absolute原理）。
HTML結構
日記延左側翻頁—原理：如果我們直接讓page頁延Y軸旋轉它會延自身Y軸居中旋轉，因此我們可以把page頁設置為page-box的一半定位在右側再讓page-box延Y軸旋轉就可以實現page頁延左邊框旋轉了。
翻頁原理
基本樣式：給body添加一個背景顏色，用perspective添加一個觀察點（目的是為了看上去更立體）。
添加立體效果：“transform-style: perspective-3d”讓元素在3D空間內呈現，延X軸旋轉30°調整可視面，這兩步也是為了讓元素看上去更立體。
page-box設置：給所有的page-box設置相同的寬高，position設為absolute使其重疊在一起，并調整到相應的位置。
page頁通用設置：設置page頁的寬高，與父元素page-box同高，寬度為page-box的一半，left:50%定位在page-box的右側，添加一像素實線邊框，顏色最好與封面主題色調一致（親測效果好些）。
封面樣式：給封面添加一個背景圖片（自選），大小與page頁一致。
內容頁樣式：根據實際情況給內容頁添加一定的樣式（字體、顏色、邊距等），根據個人喜好隨便搞。
添加翻頁效果：這里所有頁面的動畫效果都一樣，只需設置每個page-box都延Y軸旋轉即可，只是旋轉的角度和效果持續及延遲的時間稍有不同，自己在做的時候根據所需效果調節即可，下面是相應的動畫設置和動畫引入代碼。
封面
第二頁
第三頁
大功告成，現在可以刷新你的頁面看看效果了！
感興趣的同學現在就試試吧！如果發現問題請@窗外樓。
在CSS3中新增了很多的新特性，其中使用頻率比較高的應該是動畫效果了，它可以幫助我們實現以前使用Javascript才能實現的效果，極大的提高網頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。
本文的源碼已經放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實際的運行效果，動態圖如下所示。
效果圖
在看到上述的效果圖后，我們來進行分析，這個過程是如何實現的。
這個頁面我們通過一個ul包含三個li來實現，每個li都給一個固定的寬度和高度。
第一個li在頁面上靜止不動。
第二個li添加動畫效果，使其直接繞Y軸翻轉360度。
第三個li添加動畫效果，但是翻轉周期是在25%的時候開始，因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個過程，那就是給外層的ul元素添加perspective屬性，這個屬性是決定這個動畫能不能實現的主要的因素。
perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。
需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。
我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。
html元素
其對應的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。
接下來，我們來具體看看這個翻書效果的代碼實現。
通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個li添加動畫。
第二個li的css屬性
最后是給第三個li添加動畫。
第三個li的css屬性
注意到上面的代碼中有個25%和100%的設置，這個和第二個li不同，所以會有一種翻轉書頁快慢的差異感。
如果按照上述代碼來做，即可實現文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實現了一個翻書動畫效果，大家學會了嗎？
在CSS3中新增了很多的新特性，其中使用頻率比較高的應該是動畫效果了，它可以幫助我們實現以前使用Javascript才能實現的效果，極大的提高網頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。
本文的源碼已經放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實際的運行效果，動態圖如下所示。
效果圖
在看到上述的效果圖后，我們來進行分析，這個過程是如何實現的。
這個頁面我們通過一個ul包含三個li來實現，每個li都給一個固定的寬度和高度。
第一個li在頁面上靜止不動。
第二個li添加動畫效果，使其直接繞Y軸翻轉360度。
第三個li添加動畫效果，但是翻轉周期是在25%的時候開始，因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個過程，那就是給外層的ul元素添加perspective屬性，這個屬性是決定這個動畫能不能實現的主要的因素。
perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。
需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。
我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。
html元素
其對應的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。
接下來，我們來具體看看這個翻書效果的代碼實現。
通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個li添加動畫。
第二個li的css屬性
最后是給第三個li添加動畫。
第三個li的css屬性
注意到上面的代碼中有個25%和100%的設置，這個和第二個li不同，所以會有一種翻轉書頁快慢的差異感。
如果按照上述代碼來做，即可實現文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實現了一個翻書動畫效果，大家學會了嗎？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
