/* 样式设置 */
.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进行翻页动画，使得元素的显示更加生动，同时也提高了用户的体验。