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

類似翻書效果，原本的意思是使用JS來控制的，點(diǎn)擊一次之后使用setInterval去控制書頁翻過去的動畫，當(dāng)書頁翻轉(zhuǎn)180°之后，清除掉setInterval，但當(dāng)我連續(xù)點(diǎn)擊，那之前沒有翻轉(zhuǎn)180°的書頁將無法繼續(xù)完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當(dāng)然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們?yōu)槭裁床蝗ナ褂檬褂媚?#xff0c;只要為加上animation動畫就可以直接避免這個(gè)問題，animation動畫默認(rèn)是每次都執(zhí)行完動畫，所以，當(dāng)出現(xiàn)連點(diǎn)的時(shí)候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上代碼，及實(shí)現(xiàn)步驟：

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1

2

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。