css3向下翻书的效果 |bootstrap 定制css

.book {
position: relative;
width: 400px;
height: 580px;
margin: 100px auto;
perspective: 1200px;
}
.book:hover .page_top::before,
.book:hover .page_top {
transform: rotateX(-180deg);
transition-duration: 0.8s;
transition-timing-function: ease-out;
transition-delay: 0.2s;
}
.book:hover .page_bottom::before,
.book:hover .page_bottom {
transform: rotateX(180deg);
transition-duration: 0.8s;
transition-timing-function: ease-out;
}
.book .page_top,
.book .page_bottom {
position: absolute;
width: 100%;
height: 50%;
background-color: #f2f2f2;
transform-origin: top center;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.book .page_top::before,
.book .page_bottom::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
transform-origin: top center;
}
.book .page_top {
top: 0;
z-index: 2;
}
.book .page_top::before {
transform: rotateX(-5deg);
}
.book .page_bottom {
bottom: 0;
transform: rotateX(-180deg);
}
.book .page_bottom::before {
transform: rotateX(5deg);
}

以上代码中，.book是书的容器，设置了width、height和perspective属性。.page_top和.page_bottom是书的两页，都设置了position、width、height、background-color、transform-origin和box-shadow属性。::before是伪元素，用于模拟页面的弯曲效果。

通过:hover伪类和过渡属性，当鼠标移动到书的容器上时，两页的transform属性就会发生变化，从而实现向下翻页的效果。

在实际运用中，还可以加入其它的动画效果，比如在翻页时加入音效，或在翻页完成后加入弹出框等交互效果，让用户体验更加丰富。