CSS翻頁時鐘是一種很酷的時鐘效果，可用于各種網頁和應用程序。下面是一個漂亮的CSS翻頁時鐘示例：

/* 樣式設置 */
.clock {
font-family: Arial;
font-size: 50px;
color: #ffffff;
text-align: center;
margin: 0 auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 10px;
background: blue;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
/* 設置外框 */
.clock:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 90px;
border-radius: 10px;
background: #ffffff;
transform-style: preserve-3d;
transform: perspective(500px) rotateY(-20deg);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transition: transform 0.5s;
}
/* 翻頁動畫 */
.clock:hover:before {
transform: perspective(500px) rotateY(-180deg);
}
/* 設置時間 */
.time {
position: absolute;
top: 20px;
left: 0;
right: 0;
font-size: 20px;
font-weight: bold;
}
/* 設置日期 */
.date {
position: absolute;
top: 50px;
left: 0;
right: 0;
font-size: 20px;
}
/* HTML 結構 */
<div class="clock">
<div class="time"></div>
<div class="date"></div>
</div>

以上代碼可以創建一個圓角藍色背景的時鐘，當鼠標懸浮在上面時，可通過3D翻頁動畫顯示當前時間和日期。

CSS 翻頁效果是一種很受歡迎的動畫效果，可以應用于各種網頁和應用程序中。使用CSS進行翻頁動畫，使得元素的顯示更加生動，同時也提高了用戶的體驗。