【前端入門系列】HTML5動畫與動效（之六）

01-27

在之前的入門系列中，我們已經學習了使用transform和transition相結合來製造3D效果動畫的方法（見：【前端入門系列】HTML5動畫與動效（之四））。在本例中我們將更進一步，通過製作一種3D翻頁動畫效果，以此來了解更多HTML5中有關通過CSS來實現3D變換的知識。整個文章非常短，大概3-5分鐘可以讀完。

準備工作

我們的設想是做一本簡單的「書」，這本書只有三頁。當滑鼠指針移動到書上時將翻開書，滑鼠指針移開時合上書，如圖所示。

雖然這只是一個非常簡單的例子，但是基於對該案例理解，我們就有可能快速掌握在HTML5中使用CSS進行3D變換，以及製作相應3D動畫的技巧。

我們首先準備了三張尺寸為300*400的圖片，分別作為書中的前三頁，如圖所示。

然後，創建HTML代碼，如下：

<ul class="book">n <li class="cover">第1頁</li>n <li class="page1">第2頁</li>n <li class="page2">第3頁</li>n</ul>n

在以上代碼中，ul元素對應了整本書籍，其下每一個li元素就是書的一頁。我們分別為第1，2，3頁設置了不同的class，以便於展開進一步試驗。

CSS代碼創建

接下來，我們需要通過編寫CSS樣式來實現「書」的效果。

首先，我們將所有margin和padding清零，並設置book在頁面中居中顯示，代碼如下：

*{ntmargin:0;ntpadding:0;n}n.book{ntwidth:300px;ntmargin:0 auto;ntposition:relative;n}n

對於代表書頁的三個li元素而言，我們都將其設置為絕對定位，並設置其大小為300*400，即與圖片的寬高相同。同時，為每一頁設置內陰影，以加強書頁的邊緣質感。最後，我們為三頁分別設置不同的z-index，以對應不同的頁碼在空間中的上下層級關係。代碼如下：

li{ntposition:absolute;ntfont-size:0;ntwidth:300px;ntheight:400px;ntbox-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);n}n.cover{ntbackground:url(cover.png);ntz-index:0;n}n.page1{ntbackground:url(page.png);ntleft:-300px;ntz-index:-1;n}n.page2{ntbackground:url(page2.png);ntz-index:-2;n}n

在以上代碼中，我們按照默認的一本書中第一、二、三頁的上下順序，為每一個li元素設置了不同的z-index值。值得注意的是，我們預先使第二頁向左移動300像素，現在頁面的顯示效果如下圖所示。可以從圖中看到，第二頁顯示在封面的左側，以此同時我們看不到第三頁，因為它被蓋在了封面下方。

接下來，我們需要為前兩頁分別設置默認的旋轉角度和旋轉點，否則頁面將圍繞其中軸旋轉，不能形成翻頁的效果。對於第一頁而言，它默認是不需要旋轉的，當翻頁時，旋轉點應該位於其左側中點，而對於第二頁而言，它默認狀態下是被翻過的狀態，因此要事先將其Y軸旋轉180度，同時使其旋轉點位於右側中點。在本例中我們將不對第3頁添加交互，因此不需要為其設置更多的樣式，代碼如下：

.cover{nttransform-origin: left center;nt-webkit-transform-origin: left center;n}n.page1{nttransform: rotateY(180deg);nttransform-origin: right center;nt-webkit-transform:rotateY(180deg);nt-webkit-transform-origin: right center;n}n

添加以上代碼後，測試頁面，現在第二頁在經過Y軸翻轉後位於了第一頁之下，因此唯一可見的只剩下了第一頁，如圖所示。

小經驗：由以上代碼我們可以總結出一個規律，即奇數頁的旋轉軸都在左側，而偶數頁的旋轉軸都在右側，事實上我們翻開一本書中任何一頁就能發現這樣的規律。

製作3D動畫

在做好準備工作後，我們可以為這本書添加transition動畫，在滑鼠指針滑過時，使第一頁Y軸旋轉至負180度，同時使第二頁Y軸旋轉翻動至0度，從而實現翻頁效果。此外，為了使翻轉的第一頁不再覆蓋在第二頁之上，我們還需要設置backface-visibility屬性為hidden，使得翻轉到反面時不顯示。代碼如下：

li{ntbackface-visibility: hidden; /*使得翻轉到反面時不顯示*/nt-webkit-backface-visibility: hidden;nttransition:transform 1s;nt-webkit-transition:-webkit-transform 1s;n}n.book:hover .cover{nttransform: rotateY(-180deg);nt-webkit-transform: rotateY(-180deg);n}n.book:hover .page1{nttransform: rotateY(0deg);nt-webkit-transform: rotateY(0deg);n}n

測試頁面，當滑鼠指針滑過書本時，頁面就將翻開，而移開滑鼠指針時，頁面將合上，如圖所示。

從現在的翻頁效果來看，我們很難體會到這是3D翻頁動畫。為了使整個翻頁效果更具有透視感，我們需要增加一些相關樣式，代碼如下：

.book{nt-webkit-perspective:1500px;ntperspective:1500px;nt-webkit-transform-style:preserve-3d;nttransform-style:preserve-3d;nt-webkit-transform:rotateX(10deg);nttransform:rotateX(10deg);n}n

在以上代碼中，我們設置了book的perspective屬性為1500像素，以增加透視景深，同時設置了transform-style屬性為preserve-3d ，以產生3D透視效果。最後，我們還使book元素在x軸上略微旋轉10度，以使得透視角度更佳。測試頁面，現在我們將得到更加逼真的翻頁效果，如圖所示。