[分享]css3折页

CSS3折页是一项非常有趣的技术，它可以让网页元素呈现出类似于纸张折叠效果。相信大家一定见过一些网页广告或者图片展示页面会使用到这种效果，它不仅可以增加页面的趣味性，还可以让网页内容更加富有层次感。 ...

CSS3折页是一项非常有趣的技术，它可以让网页元素呈现出类似于纸张折叠效果。相信大家一定见过一些网页广告或者图片展示页面会使用到这种效果，它不仅可以增加页面的趣味性，还可以让网页内容更加富有层次感。

 .fold {
        width: 200px;
        height: 200px;
        position: relative;
        perspective: 1000px; /* 设置透视点 */
    }

    .fold .page {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: white;
        box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2); /* 设置阴影 */
        transform-origin: left center; /* 设置旋转原点 */
    }

    .fold .page:nth-child(1) {
        z-index: 2;
        transform: rotateY(-90deg);
        transform-origin: right center;
    }

    .fold .page:nth-child(2) {
        z-index: 1;
        transform: rotateY(0deg);
    }

    .fold:hover .page:nth-child(1) {
        transform: rotateY(0deg);
    }

    .fold:hover .page:nth-child(2) {
        transform: rotateY(90deg);
        transform-origin: left center;
    } 

上面是一个折页效果的CSS代码，其中，我们首先为整个折页容器设置了透视点，这个透视点可以使得我们的页面元素具有立体感；然后我们设置了两个页面元素，其中第一个元素为折页的另一面，它的z-index值要比第二个元素小，这样才能使得第二个元素盖在它上面；第一个元素的旋转角度为-90度，在hover时会逐渐恢复为0度；第二个元素默认的旋转角度是0度，在hover时会逐渐旋转90度。

以上是一个简单的CSS3折页效果实现代码，大家可以根据自己的需要进行改动，并运用到自己的网页设计中，让网页变得更加生动有趣。