CSS圖片翻頁效果是一種常用的網(wǎng)頁設(shè)計(jì)效果，可以給網(wǎng)頁增加美觀程度，提高用戶體驗(yàn)。下面是一個(gè)簡單的CSS圖片翻頁效果代碼實(shí)例：

html,
body {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.flip-box {
position: relative;
width: 300px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.5s;
margin: 0 10px;
}
.flip-box:hover {
transform: rotateY(180deg);
}
.flip-box .front,
.flip-box .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box .front {
z-index: 2;
background-image: url(front.png);
background-size: cover;
}
.flip-box .back {
transform: rotateY(180deg);
z-index: 1;
background-image: url(back.png);
background-size: cover;
}

以上代碼實(shí)現(xiàn)的是兩個(gè)圖片的翻頁效果，當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，圖片會(huì)從正面翻轉(zhuǎn)到背面，非常直觀。

其中 .container 類中設(shè)置了容器的布局，使用 flex 屬性使得容器內(nèi)部元素能夠自適應(yīng)，而 .flip-box 類中則設(shè)置了圖片的基本屬性，包括大小、背景、翻轉(zhuǎn)等特效。容器內(nèi)部的兩個(gè)圖片使用了 .front 和 .back 類來分別顯示正面和背面。

通過使用CSS來實(shí)現(xiàn)圖片的翻頁效果，不僅可以使網(wǎng)頁有更好的視覺效果，也可以提高用戶對(duì)網(wǎng)頁的滿意度，讓網(wǎng)頁顯得更加有質(zhì)感。