[分享]css3投影做书页翻页效果

CSS3的投影效果可以让页面的元素看起来更加真实、立体，最为常见的就是实现3D的翻页效果，使得网页看起来像一本真正的书籍。.fgpage { : relative; perspective: 1200...

CSS3的投影效果可以让页面的元素看起来更加真实、立体，最为常见的就是实现3D的翻页效果，使得网页看起来像一本真正的书籍。

.fg-page {
  position: relative;
  perspective: 1200px;
}

.fg-page-book {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  transition: transform 1s;
  transform-origin: 100% 50%;
  box-shadow: -30px 0 30px rgba(0,0,0,.2);
}

.fg-page-book:after {
  content: ';
  position: absolute;
  z-index: -1;
  top: 5%;
  bottom: 5%;
  left: -5%;
  right: -5%;
  background: #fff;
}

.fg-page-book .fg-page-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: -30px 0 30px rgba(0,0,0,.2);
  transform-origin: 100% 50%;
}

.fg-page-right {
  left: 50%;
  transform-origin: 0% 50%;
}

.fg-page-right .fg-page-inner {
  transform: rotateY(-40deg);
}

.fg-page-right.fg-page-active {
  transform: translate3d(-50%, 0, -300px) rotateY(40deg);
}

.fg-page-left {
  transform: rotateY(180deg);
  transform-origin: 100% 50%;
}

.fg-page-left .fg-page-inner {
  transform: rotateY(40deg);
}

.fg-page-left.fg-page-active {
  transform: translate3d(50%, 0, -300px) rotateY(-40deg);
} 

以上是一个CSS代码片段，可以被用于实现book翻页效果。其中，`.fg-page`表示整个页面区域，`perspective`属性设置了视角，`transform-origin`属性设置了动画的中心点。`.fg-page-book`是用于包含两页内容的容器，`.fg-page-inner`表示内容区域，`box-shadow`属性用于添加投影效果。最后，`.fg-page-active`用于在页面翻页时改变元素的位置和角度，实现动画效果。

总之，利用CSS3的投影效果，我们可以轻松地实现各种3D翻页动画效果，使得网站看起来更加生动、立体。