纯CSS实现的3D翻页效果

最新推荐文章于 2024-07-01 17:43:58 发布

花开时节多风雨

最新推荐文章于 2024-07-01 17:43:58 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/cnzswymp/article/details/75214059

版权

这篇博客介绍了如何仅使用CSS实现令人惊叹的3D翻页效果，内容包括详细的CSS代码和对应的HTML结构，展示了三页翻转的实现过程。

摘要由CSDN通过智能技术生成

CSS实现的3D翻页效果我是三页翻页。

CSS代码如下：

* {
    padding: 0;
    margin: 0;
}
body, html {
    height: 100%;
}
body {

    /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，
    大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    background-color: #212121;
    font-family: '微软雅黑';
}
.book {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    width: 400px;
    height: 550px;
    background-color: #fff;
    -webkit-transform: rotateX(30deg);
    -ms-transform: rotateX(30deg);
    -o-transform: rotateX(30deg);
    transform: rotateX(30deg);
}
.preserve-3d {

    /*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内,
    还是在该元素所在的平面内被扁平化。*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /*规定如何在 3D 空间中呈现被嵌套的元素*/
    transform-style: preserve-3d;
}
.book-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 550px;
    /*设置四个边框的样式*/
    border: 1px solid papayawhip;
    text-align: center;
}
.book-page-box {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    /*设置旋转元素的基点位置*/
    transform-origin: 0 50%;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    /*旋转DIV元素*/
    transform: rotateY(0deg);
}
@keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-160deg);
        -ms-transform: rotateY(-160deg);
        -o-transform: rotateY(-160deg);
        transform: rotateY(-160deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

/* Firefox */
@-moz-keyframes flipBook1 {
    0% {