<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

CSS視頻教程第21課 超實用的翻頁

言

在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

perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。

需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。

我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。

html元素

其對應的CSS屬性如下。

CSS屬性

在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。

效果圖1

如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。

效果圖

通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。

接下來，我們來具體看看這個翻書效果的代碼實現。

翻書效果HTML代碼

通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。

HTML代碼

翻書效果CSS代碼

首先看看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

perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。

需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。

我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。

html元素

其對應的CSS屬性如下。

CSS屬性

在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。

效果圖1

如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。

效果圖

通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。

接下來，我們來具體看看這個翻書效果的代碼實現。

翻書效果HTML代碼

通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。

HTML代碼

翻書效果CSS代碼

首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。

基本CSS屬性

然后是給第二個li添加動畫。

第二個li的css屬性

最后是給第三個li添加動畫。

第三個li的css屬性

注意到上面的代碼中有個25%和100%的設置，這個和第二個li不同，所以會有一種翻轉書頁快慢的差異感。

如果按照上述代碼來做，即可實現文章開始的翻書動畫效果。

結束語

今天這篇文章主要是通過CSS3新增的屬性實現了一個翻書動畫效果，大家學會了嗎？