[分享]css3折角翻页

CSS3折角翻页是一种很炫酷的效果，可以为网站提供良好的视觉体验。在这篇文章中，我们将介绍如何使用CSS3实现折角翻页。.flipcontainer { perspective: 1000px; } ...

CSS3折角翻页是一种很炫酷的效果，可以为网站提供良好的视觉体验。在这篇文章中，我们将介绍如何使用CSS3实现折角翻页。

.flip-container {
  perspective: 1000px;
}

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: all .5s;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);
}

.flipper:hover {
  transform: rotateY(180deg);
} 

首先，创建一个包含两个div元素的父元素。这个父元素需要有透视属性，这可以通过CSS的perspective属性实现。其次，给两个子元素添加样式类名，分别称为front和back。这两个元素都需要position:absolute;和top:0;left:0;，并且backface-visibility属性必须设置为hidden，以此避免翻转后的闪烁问题。

接下来，将包含两个子元素的父元素设为相对定位，同时给它添加transform-style:preserve-3d;的transform属性。.flipper的transform-origin属性默认在元素的中心点，这意味着翻转将发生在元素的中心点。

最后，给.flipper添加hover伪类，在这个伪类下添加翻转效果，用rotateY(-180deg)将back元素翻转。

现在你可以尝试在你的网站中添加这个效果了！