[分享]css3怎样左右翻页

在CSS3中，可以使用transform属性实现元素的旋转，从而达到左右翻页的效果。

/* 创建一个盒子 */
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    border: 2px solid black;
    overflow: hidden;
}

/* 创建左侧页面 */
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #FDFD96;
    transition: transform 1s ease-in-out;
}

/* 创建右侧页面 */
.page:nth-child(2) {
    left: 50%;
    background-color: #FFB347;
}

/* 当鼠标悬停在左侧页面时，翻转至右侧页面 */
.page:hover:nth-child(1) {
    transform: perspective(***px) rotateY(-180deg);
}

/* 当鼠标悬停在右侧页面时，翻转至左侧页面 */
.page:hover:nth-child(2) {
    transform: perspective(***px) rotateY(180deg);
} 

上面的代码中，我们创建了一个容器盒子，并用overflow属性隐藏其超过部分。然后，我们创建了两个页面，用nth-child选择器指定左右位置及颜色，并为它们设置了翻转效果。当鼠标悬停在左侧页面时，我们将其rotateY转到180度，就可以展示右侧页面，反之亦然。

细心的读者可能已经发现，在我们的过渡动画中，我们使用了perspective属性。它与CSS3的3D变换有关，将使浏览器具有感知深度的能力，从而呈现更加真实的动画效果。