在網頁設計中，翻頁圖片是一個常見的元素。使用CSS可以很方便地實現翻頁效果。

.page {
position: relative;
width: 200px;
height: 300px;
perspective: 800px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.card.front {
z-index: 2;
transform: rotateY(0deg);
}
.card.back {
z-index: 1;
transform: rotateY(-180deg);
}
.page:hover .card.front {
transform: rotateY(180deg);
}
.page:hover .card.back {
transform: rotateY(0deg);
}
.page img {
position: absolute;
width: 100%;
height: 100%;
}

上面的代碼實現了一個翻頁圖片的效果。一個盒子（.page）包含兩張圖片（.card.front和. card.back）并控制它們的展示狀態。當鼠標懸停在盒子上時，.card.front翻轉180度，.card.back翻轉回來。這兩張圖片都是絕對定位的，并覆蓋在盒子上。當然，你可以根據需要進行更改和調整。

通過CSS實現翻頁圖片可以提高網站的交互性和視覺效果，并且不需要使用Javascript等其他編程語言。