?

使用 css 可以實現多種翻頁效果，比如書本翻頁、卡片翻轉等。以下是兩種常見的翻頁效果實現：

效果 1：書本翻頁效果

通過 transform 和 rotateY 實現 3D 翻頁效果。

html 結構

<divclass="book">
<divclass="page page1">第一頁</div>
<divclass="page page2">第二頁</div>
</div>

CSS 樣式

body?{
display: flex;
justify-content: center;
align-items: center;
height:?100vh;
margin:?0;
background-color:?#f0f0f0;
perspective:?1000px;?/* 3D 透視效果 */
}.book?{
width:?200px;
height:?300px;
position: relative;
transform-style: preserve-3d;?/* 保持 3D 效果 */
}.page?{
position: absolute;
width:?100%;
height:?100%;
background-color: white;
border:?1px?solid?#ccc;
box-shadow:?04px8pxrgba(0,?0,?0,?0.2);
display: flex;
justify-content: center;
align-items: center;
font-size:?20px;
backface-visibility: hidden;?/* 隱藏背面 */
transition: transform?1s?ease-in-out;
}.page1?{
transform-origin: left;
}.page2?{
transform-origin: right;
transform:?rotateY(180deg);?/* 初始狀態為背面 */
}.book:hover.page1?{
transform:?rotateY(-180deg);?/* 翻頁效果 */
}.book:hover.page2?{
transform:?rotateY(0deg);?/* 翻頁效果 */
}

效果 2：卡片翻轉效果

通過 transform 和 rotateY 實現卡片翻轉效果。

HTML 結構

<divclass="card">
<divclass="card-front">正面</div>
<divclass="card-back">背面</div>
</div>

CSS 樣式

body?{
display: flex;
justify-content: center;
align-items: center;
height:?100vh;
margin:?0;
background-color:?#f0f0f0;
perspective:?1000px;?/* 3D 透視效果 */
}.card?{
width:?200px;
height:?300px;
position: relative;
transform-style: preserve-3d;?/* 保持 3D 效果 */
transition: transform?1s?ease-in-out;
}.card-front,
.card-back?{
position: absolute;
width:?100%;
height:?100%;
background-color: white;
border:?1px?solid?#ccc;
box-shadow:?04px8pxrgba(0,?0,?0,?0.2);
display: flex;
justify-content: center;
align-items: center;
font-size:?20px;
backface-visibility: hidden;?/* 隱藏背面 */
}.card-front?{
background-color:?#ffcc00;
}.card-back?{
background-color:?#00ccff;
transform:?rotateY(180deg);?/* 初始狀態為背面 */
}.card:hover?{
transform:?rotateY(180deg);?/* 翻轉效果 */
}

效果 3：多頁翻頁效果

通過多個頁面疊加實現多頁翻頁效果。

HTML 結構

<divclass="flip-book">
<divclass="page page1">第一頁</div>
<divclass="page page2">第二頁</div>
<divclass="page page3">第三頁</div>
</div>

CSS 樣式

body?{
display: flex;
justify-content: center;
align-items: center;
height:?100vh;
margin:?0;
background-color:?#f0f0f0;
perspective:?1000px;?/* 3D 透視效果 */
}.flip-book?{
width:?200px;
height:?300px;
position: relative;
transform-style: preserve-3d;?/* 保持 3D 效果 */
}.page?{
position: absolute;
width:?100%;
height:?100%;
background-color: white;
border:?1px?solid?#ccc;
box-shadow:?04px8pxrgba(0,?0,?0,?0.2);
display: flex;
justify-content: center;
align-items: center;
font-size:?20px;
backface-visibility: hidden;?/* 隱藏背面 */
transition: transform?1s?ease-in-out;
}.page1?{
transform-origin: left;
}.page2?{
transform-origin: left;
transform:?rotateY(-180deg);?/* 初始狀態為背面 */
}.page3?{
transform-origin: left;
transform:?rotateY(-180deg);?/* 初始狀態為背面 */
}.flip-book:hover.page1?{
transform:?rotateY(-180deg);?/* 翻頁效果 */
}.flip-book:hover.page2?{
transform:?rotateY(0deg);?/* 翻頁效果 */
}.flip-book:hover.page3?{
transform:?rotateY(0deg);?/* 翻頁效果 */
}

總結

• 書本翻頁效果：通過 rotateY 和 transform-origin 實現。

• 卡片翻轉效果：通過 rotateY 和 backface-visibility 實現。

• 多頁翻頁效果：通過多個頁面疊加和 rotateY 實現。

這些效果可以用于網頁中的交互設計，比如展示圖片、卡片或書籍內容。根據需求選擇合適的翻頁效果！

·······END·······

? 喜歡的話可以點個贊關注博主哦！！！?