CSS3實現(xiàn)3D翻書效果
發(fā)布時間：2016-06-20 11:01:34 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS3實現(xiàn)3D翻書效果，基于CSS3新屬性Animation及transform實現(xiàn)類似翻書效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
先上效果圖：（樣式有點丑，可以忽略一下下，效果出來了就好，后期加到其他項目中方便更改0.0）
類似翻書效果，原本的意思是使用JS來控制的，點擊一次之后使用setInterval去控制書頁翻過去的動畫，當(dāng)書頁翻轉(zhuǎn)180°之后，清除掉setInterval，但當(dāng)我連續(xù)點擊，那之前沒有翻轉(zhuǎn)180°的書頁將無法繼續(xù)完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當(dāng)然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們?yōu)槭裁床蝗ナ褂檬褂媚?，只要為加上animation動畫就可以直接避免這個問題，animation動畫默認(rèn)是每次都執(zhí)行完動畫，所以，當(dāng)出現(xiàn)連點的時候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上代碼，及實現(xiàn)步驟：
注：本實例JS部分均以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫
html部分：（這部分真心·····，算了，丑就丑點吧~.~）
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <body>
- <!-- 所展示的書的內(nèi)容 -->
- <div class="book">
- <div class="page">
- <span>1</span>
- <span>2</span>
- </div>
- <div class="page">
- <span>3</span>
- <span>4</span>
- </div>
- <div class="page">
- <span>5</span>
- <span>6</span>
- </div>
- <div class="page">
- <span>7</span>
- <span>8</span>
- </div>
- <div class="page">
- <span>9</span>
- <span>10</span>
- </div>
- <div class="page">
- <span>11</span>
- <span>12</span>
- </div>
- <div class="page">
- <span>13</span>
- <span>14</span>
- </div>
- <div class="page">
- <span>15</span>
- <span>16</span>
- </div>
- <div class="page">
- <span>17</span>
- <span>18</span>
- </div>
- <div class="page">
- <span>19</span>
- <span>20</span>
- </div>
- </div>
- <!-- 用來控制上一頁和下一頁操作 -->
- <input type="button" value="上一頁" id="before"/>
- <input type="button" value="下一頁" id="after"/>
- </body>
CSS部分：（通過改變transform中rotatey的值，來實現(xiàn)書頁的翻轉(zhuǎn)效果）
CSS Code復(fù)制內(nèi)容到剪貼板
- <style>
- .book{
- width: 460px;
- height: 300px;
- position: relative;
- margin: 150px 400px;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transform-style: preserve-3d;
- transform: rotatex(30deg);
- }
- .page{
- width: 230px;
- height: 300px;
- border: 1px solid #666;
- position: absolute;
- rightright: 0;
- transform-origin: left;
- transform-style: preserve-3d;
- backface-visibility:hidden;
- font-size: 60px;
- text-align: center;
- line-height: 300px;
- }
- .page span{
- display: block;
- width: 100%;
- position: absolute;
- background-color: #00FFFF;
- }
- .page span:nth-child(2){
- transform: rotatey(-180deg);
- backface-visibility:hidden;
- }
- /*以下兩個動畫可以只使用第一個，animation中有reverse，可以反向執(zhí)行動畫，
- 使用時需要在JS中點擊上一頁時添加改屬性值*/
- /*翻書下一頁的動畫*/
- @keyframes page {
- 0%{
- transform: rotatey(0deg);
- }
- 100%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- }
- /*翻書上一頁的動畫*/
- @keyframes page1 {
- 0%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- 100%{
- transform: rotatey(0deg);
- }
- }
- </style>
JS部分（JS部分主要實現(xiàn)點擊上/下一頁時，為相應(yīng)的div添加animation屬性）
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <script>
- var before = document.querySelector("#before");
- var after = document.querySelector("#after");
- var book = document.querySelector(".book");
- var page = document.getElementsByClassName("page"); 7 rotate();
- function rotate(){
- var middle = 0;12 for(var z=0;z<book.children.length;z++){
- page[z].style.zIndex = book.children.length-z;
- }
- after.onclick = function(){
- if(middle != book.children.length){
- page[middle].style.animation = "page 1.5s linear 1 forwards";
- middle++;
- }else{
- middle = book.children.length;
- }
- };
- before.onclick = function(){
- if(middle != 0){
- page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
- middle--;
- }else{
- middle = 0;
- }
- }
- }
- </script>
關(guān)于最后JS部分，主要作用在于，當(dāng)點擊上/下一頁時，為相應(yīng)的div添加animation屬性，具體animation的詳解，還是需要查看API。
介于兼容性的問題，這里比較好的解決辦法是添加class，而不是去添加animation，為適應(yīng)更多瀏覽器，需要添加前綴-webkit-、-moz-·······，所以在一個類中寫好這些東西，直接添加類就可以了，或者寫一個函數(shù)，封裝好，能直接輸出需要的字符串就好。
相關(guān)文章
- 3D字體而且還帶有陰影，這種效果想必大家只有認(rèn)為一些高級的作圖工具才可以實現(xiàn)的吧，css3的出現(xiàn)讓這一切看似不可能的實現(xiàn)成為可能，接下來為大家介紹下3D字體帶陰影效果的2013-03-20
- 使用HTML5 的canvas標(biāo)簽和 three.js 實現(xiàn)了 3D 的雪花飛舞效果。你可以拖動鼠標(biāo)進行旋轉(zhuǎn)，需要在支持CSS3屬性的瀏覽器下瀏覽2013-12-27
css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08- 這篇文章主要為大家介紹了一個利用HTML5和CSS3制作的3D愛心動畫的教程，可以再任何的時間地點送給自己的女友，相當(dāng)?shù)睦寺?，關(guān)鍵是代碼相當(dāng)簡單，直接復(fù)制也可以哦2014-11-05
- 今天要給大家分享一款純css3實現(xiàn)的超炫3D表單。該特效頁面的加載的時候3d四十五度傾斜，當(dāng)鼠標(biāo)經(jīng)過的時候表單動畫回正。效果非常炫，有具體的代碼，大家可以嘗試制作哦2014-12-01
- 這篇文章主要介紹了css3實現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23
一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程，css3使我們能夠跳出2d空間，實現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31一款利用html5和css3實現(xiàn)的3D滾動特效的教程
怎么利用css3和html5制作圓形很正方形的3D滾動特效，今天給大家?guī)硪豢頷tml5和css3實現(xiàn)的3D滾動特效。代碼很全，不會的朋友可以可以進來學(xué)習(xí)一下，需要的朋友可以參考下2015-01-04- 這篇文章主要介紹了css3實現(xiàn)3d旋轉(zhuǎn)動畫特效，使用CSS3實現(xiàn)了3d立方體的左旋轉(zhuǎn)，右旋轉(zhuǎn)，上下旋轉(zhuǎn)等效果，十分實用，有需要的小伙伴來參考下吧2015-03-10
- 這篇文章主要介紹了利用HTML5繪制點線面組成的3D圖形的示例,主要還是利用了HTML5中的Canvas API,需要的朋友可以參考下2015-05-12