使用CSS實現(xiàn)簡單的翻頁效果
我要評論基本原理
我們先來看一下翻頁的過程動圖，如下：
觀察動圖，大致將此翻頁過程分為三個狀態(tài)，書頁未翻開、書頁翻動中、書頁翻動完成，對應的是“圖 翻頁過程”?？梢钥闯?，翻頁過程中，第二頁是壓在第一頁上的，隨著旋轉(zhuǎn)角度增加，覆蓋面積逐漸增大，翻頁完成時，第二頁完全覆蓋第一頁，據(jù)此畫出兩頁的狀態(tài)，如圖“圖 翻頁簡析”。
到此，可以用代碼先把項目的樹形結(jié)構(gòu)先寫出來
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS實現(xiàn)翻頁效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
background-color: bisque;
margin: auto;
}
.book {
background-color: cornflowerblue;
position: relative;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
line-height: 400px;
text-align: center;
background-color: #fda3a3;
}
.front {
background-color: #fac8bf;
z-index: 10;
}
.back {
background-color: #a990d2;
z-index: 10;
}
</style>
</head>
<body>
<h1>CSS實現(xiàn)翻頁效果</h1>
<article>
<div class="book">
<div class="pageItem front">Page 1</div>
<div class="pageItem back">Page 2</div>
<div class="pageItem">Page 3</div>
</div>
</article>
</body>
</html>代碼實現(xiàn)
觀察“圖 翻頁簡析”得出page2旋轉(zhuǎn)，page1保持不動，即可基本模擬出翻頁效果，運用css的動畫效果可以實現(xiàn)page2的連續(xù)旋轉(zhuǎn)，而動畫的初始狀態(tài)對應的是“圖 翻頁簡析”的①，結(jié)束狀態(tài)則對應③，接下來需要確定的是旋轉(zhuǎn)中心點以及旋轉(zhuǎn)軸，旋轉(zhuǎn)中心點可以是不斷變化的，但為了方便，我們?nèi)∫还潭ㄐD(zhuǎn)中心點就好，“圖 翻頁簡析”中三條輔助線的相交點大致在左下方，可以確定旋轉(zhuǎn)中心點的位置范圍。以代碼圖形大小為基準，畫出對應的坐標系以及旋轉(zhuǎn)中心點，如“圖 旋轉(zhuǎn)示意圖”：
在上圖中，旋轉(zhuǎn)中心點為點A，旋轉(zhuǎn)軸為線AB，另外，初始旋轉(zhuǎn)角度即∠DAB的大小，記∠ACD為角c，∠DAB=2∠DAC=2(90-∠ACD)=180-2c，由tanc=AD/CD,求出c≈33.7,可得∠DAB=112.6。
修改代碼，為page2添加旋轉(zhuǎn)動畫：
.back {
//...
left: -300px;
transform-origin:300px 600px;
transform: rotate(112.6deg);
transition: 1s;
}
article:hover .back{
transform: rotate(0deg);
}考慮到翻頁是折角，相當于page1隱藏折角，而page2只顯示這一部分折角，page1和page2顯示隱藏的劃分是線AC，在線AC左邊顯示，右邊隱藏，翻頁過程中，線AC也是在旋轉(zhuǎn)的。要實現(xiàn)部分顯示功能，css中的overflow:hidden不就可以。想象一下，一個以線AC為邊線的盒子套上page1和page2,使得盒子內(nèi)的內(nèi)容顯示，盒子外則隱藏，那不就能達到我們想要的效果了嗎？當然，此父盒子也是要同步旋轉(zhuǎn)的，但是，由于盒子內(nèi)的元素也會和盒子旋轉(zhuǎn)相同的角度，那我們原定的旋轉(zhuǎn)角度就會因此發(fā)生偏移，如下圖①：
如上圖所示，添加父盒子，設定父盒子的旋轉(zhuǎn)中心點同是點A。偏移的角度即上圖③中父盒子的旋轉(zhuǎn)角度，該角和角c為內(nèi)錯角，因此該旋轉(zhuǎn)角度為33.7°。page1和page2只要朝反方向旋轉(zhuǎn)相同的角度就能回復原本位置。編寫代碼時按照上圖步驟一步步進行調(diào)整，最終添加父盒子后的代碼為：
<style>
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.front {
//...
//- z-index: 10;
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
//...
//- z-index: 10;
//- transform-origin:300px 600px;
//- transform: rotate(112.6deg);
transform-origin: 300px 600px;
transform: rotate(146.3deg);
bottom: 200px;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
//- transform: rotate(0deg);
transform: rotate(90deg);
}
</style>頁面美化
最后，為了使效果更為逼真，添加相應的陰影，替換圖片進行美化。
最終代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS實現(xiàn)翻頁效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
margin: auto;
box-shadow: 2px 3px 5px 6px #3f1300;
background-image: url(https://cdn.pixabay.com/photo/2016/12/18/09/05/trees-1915245_1280.jpg);
}
.book {
background-color: cornflowerblue;
position: relative;
}
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
text-align: center;
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
.front {
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
left: -300px;
transform-origin: 300px 600px;
transform: rotate(146.3deg);
transition: 1s;
bottom: 200px;
}
figure img {
width: 100%;
height: 100%;
aspect-ratio: 3/4;
object-fit: cover;
}
figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-wrap: nowrap;
color: #fff;
background-color: rgba(255, 255, 255, .5);
padding: 1em;
border: 4px double #fff;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>CSS實現(xiàn)翻頁效果</h1>
<article>
<div class="book">
<div class="rotateBox">
<div class="pageItem front">
<figure>
<img src="https://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg" alt="">
<figcaption>Page 1</figcaption>
</figure>
</div>
<div class="pageItem back">
<figure>
<img src="https://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg" alt="">
<figcaption>Page 2</figcaption>
</figure>
</div>
</div>
<div class="pageItem">
<figure>
<img src="https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg"
alt="">
<figcaption>Page 3</figcaption>
</figure>
</div>
</div>
</article>
</body>
</html>小小改動
想要讓頁面初始狀態(tài)有個小小的折角，只要設置初始角度>33.7°，以45°為例，需要修改上述代碼如下：
<style>
.rotateBox {
//...
//- transform: rotate(-33.7deg);
transform: rotate(-45deg);
}
.front {
//...
//- transform: rotate(33.7deg);
transform: rotate(45deg);
}
.back {
//...
//- transform: rotate(146.3deg);
transform: rotate(135deg);
}
</style>以上就是使用CSS實現(xiàn)簡單的翻頁效果的詳細內(nèi)容，更多關于CSS翻頁的資料請關注腳本之家其它相關文章！
相關文章
CSS3打造的現(xiàn)代交互式登錄界面詳細實現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設計中的應用,涵蓋動畫、選擇器、自定義字體及盒模型技術,提升界面美觀與交互性,同時優(yōu)化性能和可訪問性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
本文給大家講解CSS 的三種核心布局機制——普通流(Normal Flow)、浮動(Float)和定位(Positioning)對于創(chuàng)建靈活、響應式的網(wǎng)頁至關重要,本文將深入探討這三種機制的工作原2025-06-19
css實現(xiàn)角標效果并帶有文章或圖標效果(完整代碼)
文章介紹如何用CSS實現(xiàn)角標效果,通過.active類結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標志,適用于按鈕或卡片元素的視覺增強設計2025-06-19CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
CSS Anchor Positioning是一項仍在草案中的新特性，由 Chrome 125 開始提供原生支持需啟用實驗 flag,它允許你在 CSS 中通過錨點（anchor）來相對于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應用與詳細對比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會影響元素在頁面中的布局和層疊關系,以下是 static、relative、absolute、fixed、sticky 的詳細對比和應用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個強大的 CSS 簡寫屬性，用于同時控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
在日常開發(fā)中，我們經(jīng)常需要讓某個元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來實現(xiàn)這個需求，并分析各種方法的優(yōu)缺點，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結(jié)：px絕對、vw/vh響應式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應寬高變化,固定布局用px或%,響應式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16CSS 樣式表的四種應用方式及css注釋的應用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應用方式及css注釋的應用小結(jié),本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2025-05-21- 在CSS布局中，padding屬性是控制元素內(nèi)容與其邊框之間距離的關鍵工具，本文介紹CSS基礎中padding，通過本文的介紹，我們深入了解了padding的基本概念、簡寫方法以及它對元2025-05-16
