先上效果圖：(樣式有點丑，可以忽略一下下，效果出來了就好，后期加到其他項目中方便更改0.0)

類似翻書效果，原本的意思是使用JS來控制的，點擊一次之后使用setInterval去控制書頁翻過去的動畫，當書頁翻轉180°之后，清除掉setInterval，但當我連續點擊，那之前沒有翻轉180°的書頁將無法繼續完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們為什么不去使用使用呢，只要為加上animation動畫就可以直接避免這個問題，animation動畫默認是每次都執行完動畫，所以，當出現連點的時候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上代碼，及實現步驟：

注：本實例JS部分均以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫

html部分：(這部分真心·····，算了，丑就丑點吧~.~)

XML/HTML Code復制內容到剪貼板

1

2

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的css3书页翻转,CSS3实现3D翻书效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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