CSS3如何實(shí)現(xiàn)3D翻書效果

發(fā)布時(shí)間：2021-07-27 14:16:20 來源：億速云閱讀：254 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS3如何實(shí)現(xiàn)3D翻書效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

類似翻書效果，原本的意思是使用JS來控制的，點(diǎn)擊一次之后使用setInterval去控制書頁翻過去的動(dòng)畫，當(dāng)書頁翻轉(zhuǎn)180°之后，清除掉setInterval，但當(dāng)我連續(xù)點(diǎn)擊，那之前沒有翻轉(zhuǎn)180°的書頁將無法繼續(xù)完成之前的動(dòng)作，可以用清除setInterval的方式，但總感覺動(dòng)畫效果不好，當(dāng)然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們?yōu)槭裁床蝗ナ褂檬褂媚兀灰獮榧由蟖nimation動(dòng)畫就可以直接避免這個(gè)問題，animation動(dòng)畫默認(rèn)是每次都執(zhí)行完動(dòng)畫，所以，當(dāng)出現(xiàn)連點(diǎn)的時(shí)候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上代碼，及實(shí)現(xiàn)步驟：
注：本實(shí)例JS部分均以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫
html部分：（這部分真心·····，算了，丑就丑點(diǎn)吧~.~）

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

<body>
<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的值，來實(shí)現(xiàn)書頁的翻轉(zhuǎn)效果）

<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;
}
/*以下兩個(gè)動(dòng)畫可以只使用第一個(gè)，animation中有reverse，可以反向執(zhí)行動(dòng)畫，
使用時(shí)需要在JS中點(diǎn)擊上一頁時(shí)添加改屬性值*/
/*翻書下一頁的動(dòng)畫*/
@keyframes page {
0%{
transform: rotatey(0deg);
}
100%{
transform: rotatey(-180deg);
z-index: 10;
}
}
/*翻書上一頁的動(dòng)畫*/
@keyframes page1 {
0%{
transform: rotatey(-180deg);
z-index: 10;
}
100%{
transform: rotatey(0deg);
}
}
</style>

JS部分（JS部分主要實(shí)現(xiàn)點(diǎn)擊上/下一頁時(shí)，為相應(yīng)的div添加animation屬性）

<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)點(diǎn)擊上/下一頁時(shí)，為相應(yīng)的div添加animation屬性，具體animation的詳解，還是需要查看API。
介于兼容性的問題，這里比較好的解決辦法是添加class，而不是去添加animation，為適應(yīng)更多瀏覽器，需要添加前綴-webkit-、-moz-·······，所以在一個(gè)類中寫好這些東西，直接添加類就可以了，或者寫一個(gè)函數(shù)，封裝好，能直接輸出需要的字符串就好。

看完了這篇文章，相信你對“CSS3如何實(shí)現(xiàn)3D翻書效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

CSS3如何實(shí)現(xiàn)3D翻書效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽