如何利用CSS3實現3D翻書效果
這篇文章主要介紹了CSS3實現3D翻書效果，基於CSS3新屬性Animation及transform實現類似翻書效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
#先上效果圖：（樣式有點醜，可以忽略一下下，效果出來了就好，後期加到其他項目中方便更改0.0）
類似翻書效果，原本的意思是使用JS來控制的，點擊一次之後使用setInterval去控制書頁翻過去的動畫，當書頁翻轉180°之後，清除掉setInterval，但當我連續點擊，那之前沒有翻轉180°的書頁將無法繼續完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們為什麼不去使用使用呢，只要為加上animation動畫可以直接避免這個問題，animation動畫預設是每次都執行完動畫，所以，當出現連點的時候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上程式碼，及實作步驟：
註：本實例JS部分皆以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫
html部分：（這部分真心····· ·，算了，醜就醜吧~.~）
<body>
<!-- 所展示的书的内容 -->
<p class="book">
<p class="page">
<span>1</span>
<span>2</span>
</p>
<p class="page">
<span>3</span>
<span>4</span>
</p>
<p class="page">
<span>5</span>
<span>6</span>
</p>
<p class="page">
<span>7</span>
<span>8</span>
</p>
<p class="page">
<span>9</span>
<span>10</span>
</p>
<p class="page">
<span>11</span>
<span>12</span>
</p>
<p class="page">
<span>13</span>
<span>14</span>
</p>
<p class="page">
<span>15</span>
<span>16</span>
</p>
<p class="page">
<span>17</span>
<span>18</span>
</p>
<p class="page">
<span>19</span>
<span>20</span>
</p>
</p>
<!-- 用来控制上一页和下一页操作 -->
<input type="button" value="上一页" id="before"/>
<input type="button" value="下一页" id="after"/>
</body>CSS部分：（透過改變transform中rotatey的值，來實現書頁的翻轉效果）
<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，可以反向执行动画，
使用时需要在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部分主要實現點擊上/下一頁時，為對應的p添加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>關於最後JS部分，主要作用在於，當點擊上/下一頁時，為對應的p添加animation屬性，具體animation的詳解，還是需要查看API。
介於相容性的問題，這裡比較好的解決方法是添加class，而不是去添加animation，為適應更多瀏覽器，需要添加前綴-webkit-、-moz-···· ···，所以在一個類別中寫好這些東西，直接添加類別就可以了，或者寫一個函數，封裝好，能直接輸出需要的字串就好。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是如何利用CSS3實現3D翻書效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
為何在自動駕駛方面Gaussian Splatting如此受歡迎，開始放棄NeRF？
Jan 17, 2024 pm 02:57 PM
寫在前面&筆者的個人理解三維Gaussiansplatting（3DGS）是近年來在顯式輻射場和電腦圖形學領域出現的一種變革性技術。這種創新方法的特點是使用了數百萬個3D高斯，這與神經輻射場（NeRF）方法有很大的不同，後者主要使用隱式的基於座標的模型將空間座標映射到像素值。 3DGS憑藉其明確的場景表示和可微分的渲染演算法，不僅保證了即時渲染能力，而且引入了前所未有的控制和場景編輯水平。這將3DGS定位為下一代3D重建和表示的潛在遊戲規則改變者。為此我們首次系統性地概述了3DGS領域的最新發展與關
了解 Microsoft Teams 中的 3D Fluent 表情符號
Apr 24, 2023 pm 10:28 PM
您一定記得，尤其是如果您是Teams用戶，Microsoft在其以工作為重點的視訊會議應用程式中添加了一批新的3DFluent表情符號。在微軟去年宣佈為Teams和Windows提供3D表情符號之後，該過程實際上已經為該平台更新了1800多個現有表情符號。這個宏偉的想法和為Teams推出的3DFluent表情符號更新首先是透過官方部落格文章進行宣傳的。最新的Teams更新為應用程式帶來了FluentEmojis微軟表示，更新後的1800表情符號將為我們每天
選擇相機還是光達？實現穩健的三維目標檢測的最新綜述
Jan 26, 2024 am 11:18 AM
0.寫在前面&&個人理解自動駕駛系統依賴先進的感知、決策和控制技術，透過使用各種感測器（如相機、光達、雷達等）來感知周圍環境，並利用演算法和模型進行即時分析和決策。這使得車輛能夠識別道路標誌、檢測和追蹤其他車輛、預測行人行為等，從而安全地操作和適應複雜的交通環境。這項技術目前引起了廣泛的關注，並認為是未來交通領域的重要發展領域之一。但是，讓自動駕駛變得困難的是弄清楚如何讓汽車了解周圍發生的事情。這需要自動駕駛系統中的三維物體偵測演算法可以準確地感知和描述周圍環境中的物體，包括它們的位置、
CLIP-BEVFormer：明確監督BEVFormer結構，提升長尾偵測性能
Mar 26, 2024 pm 12:41 PM
寫在前面&筆者的個人理解目前，在整個自動駕駛系統當中，感知模組扮演了其中至關重要的角色，行駛在道路上的自動駕駛車輛只有通過感知模組獲得到準確的感知結果後，才能讓自動駕駛系統中的下游規控模組做出及時、正確的判斷和行為決策。目前，具備自動駕駛功能的汽車中通常會配備包括環視相機感測器、光達感測器以及毫米波雷達感測器在內的多種數據資訊感測器來收集不同模態的信息，用於實現準確的感知任務。基於純視覺的BEV感知演算法因其較低的硬體成本和易於部署的特點，以及其輸出結果能便捷地應用於各種下游任務，因此受到工業
單卡30秒跑出虛擬3D老婆！ Text to 3D產生看清毛孔細節的高精度數字人，無縫銜接Maya、Unity等製作工具
May 23, 2023 pm 02:34 PM
ChatGPT為AI產業注入一劑雞血，一切曾經的不敢想，都成為現今的基操。正持續進擊的Text-to-3D，就被視為繼Diffusion（影像）和GPT（文字）後，AIGC領域的下一個前緣熱點，得到了前所未有的關注。這不，一款名為ChatAvatar的產品低調公測，火速收攬超70萬瀏覽與關注，並登上抱抱臉週熱門（Spacesoftheweek）。 △ChatAvatar也將支援從AI生成的單視角/多視角原畫生成3D風格化角色的Imageto3D技術，受到了廣泛關注現行beta版本生成的3D模型，
牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24)
Apr 23, 2024 pm 01:20 PM
寫在前面項目連結：https://nianticlabs.github.io/mickey/給定兩張圖片，可以透過建立圖片之間的對應關係來估計它們之間的相機姿態。通常，這些對應關係是二維到二維的，而我們估計的姿態在尺度上是不確定的。一些應用，例如隨時隨地實現即時增強現實，需要尺度度量的姿態估計，因此它們依賴外部的深度估計器來恢復尺度。本文提出了MicKey，這是一個關鍵點匹配流程，能夠夠預測三維相機空間中的度量對應關係。透過學習跨影像的三維座標匹配，我們能夠在沒有深度測試的情況下推斷度量相對
Windows 11中的Paint 3D：下載、安裝和使用指南
Apr 26, 2023 am 11:28 AM
當八卦開始傳播新的Windows11正在開發中時，每個微軟用戶都對新作業系統的外觀以及它將帶來什麼感到好奇。經過猜測，Windows11就在這裡。作業系統帶有新的設計和功能變更。除了一些添加之外，它還附帶功能棄用和刪除。 Windows11中不存在的功能之一是Paint3D。雖然它仍然提供經典的Paint，它對抽屜，塗鴉者和塗鴉者有好處，但它放棄了Paint3D，它提供了額外的功能，非常適合3D創作者。如果您正在尋找一些額外的功能，我們建議AutodeskMaya作為最好的3D設計軟體。如
