css3鼠标滑过翻页

CSS3中的鼠标滑过翻页特效可以让网页更加生动，让用户有更好的体验。下面将为大家介绍如何实现这一特效。

/*CSS代码*/
.flip {
    perspective: 1000px;
}
.flip .page {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform .5s;
}
.flip:hover .page:first-child {
    transform: rotateY(-180deg);
}
.flip:hover .page:last-child {
    transform: rotateY(0);
}
.flip .page.back {
    transform: rotateY(180deg);
} 

首先，我们需要设置一个容器，这个容器用来包含两个页面。所以，我们给这个容器设置一个perspective，这会影响到里面的二个页面，让它们有立体感。然后，我们给这个容器包含的每一页都设置了backface-visibility和transform-style属性，这两个属性会让页面反转的时候看起来更加真实。

接下来，在鼠标滑过容器的时候，我们使用:hover选择器来对两页进行旋转。我们使用rotateY让页面绕Y轴旋转180度，这样就会看到页面的另外一面了。

最后，我们还可以添加一个back页面，这个back页面就是用来做反转时的中间页面的。我们把它旋转180度，然后当需要它的时候，使用JavaScript来切换它与正面页面。

这些代码不仅可以实现简单的翻页效果，还可以用来实现复杂的交互体验，例如在网页中使用图片展示、产品展示等等。希望大家能利用CSS3中的这个特效，让网页更加生动。