CSS翻頁效果是一種在網頁上應用的視覺特效，其原理是利用CSS3中的transform和transition屬性以及偽元素:before和:after等實現。以下是一個簡單的CSS翻頁效果實現的代碼段：

/* 容器樣式 */
.container {
position: relative;
width: 300px;
height: 400px;
perspective: 1000px;
}
/* 頁面樣式 */
.page {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0px 0px 5px #ddd;
transform-style: preserve-3d;
transition: all 0.5s;
}
/* 頁面背面樣式 */
.page:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #f5f5f5;
transform: rotateY(180deg);
box-shadow: 0px 0px 5px #ddd;
}
/* 下一頁樣式 */
.page.active {
transform: rotateY(180deg);
}
/* 上一頁樣式 */
.page.active:before {
transform: rotateY(0deg);
}

容器中的perspective屬性是用來定義3D環境的觀察者與元素之間的距離，常用于制作3D效果。頁面樣式中的transform-style屬性定義其子元素如何在3D空間中呈現，preserve-3d是為了保持子元素的3D空間屬性。transition屬性設置元素變化時的過渡時間和過渡方式。

頁面背面樣式中的:before偽元素定義了頁面的背面，其z-index設置為-1可以讓其在頁面正面之后，避免被遮擋，其transform:rotateY(180deg)屬性可以讓其翻轉到頁面背面。

下一頁樣式中的.active類是通過JavaScript動態添加的，其transform:rotateY(180deg)屬性可以讓當前頁面翻轉到背面，顯示下一頁。上一頁樣式中的.active:before類則是在當前頁面的背面顯示上一頁，其transform:rotateY(0deg)屬性可以讓上一頁翻轉到正面。

通過以上示例可以看出，CSS翻頁效果是通過3D變換實現的。在翻轉過程中，當前頁面通過transform:rotateY(180deg)屬性旋轉到背面，以顯示下一頁。同時，上一頁通過:before偽元素的屬性transform:rotateY(0deg)翻轉到正面以顯示在背面。