纯Css翻书效果详解

翻书效果：

书籍封面、背面、内容页都可自由更改。点击即实现高流畅度的翻页效果

代码如下：

小程序html代码：

<view class="boxbook">
    <view class="cover-page">
      <image class="book" style="width: 150rpx;" mode="widthFix" src="你的图片地址">image>
    view>
    <view class="inside-page">view>
    <view class="inside-page">view>
    <view class="inside-page">view>
    <view class="inside-page">view>
    <view class="end-page">view>
  view>

boxbook下的每一个view里面可以自己放置内容，我这里就放置了一个图片作为封面。头尾两个view作为书的封面和书的背面。

css代码：

代码中的-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。*/

/*boxbook定义书的长宽大小的*/
.boxbook {
  width: 150rpx;
  height: 220rpx;
}
.boxbook view {
  position: absolute;
  /*给所有view绝对定位*/
  border-radius: 0 8rpx 8rpx 0;
  /*圆角属性*/
  box-shadow: 0 1rpx 20rpx 5rpx rgba(0, 0, 0, 0.08);
  /*书页的阴影*/
}
/*给封面添加渐变背景和大小*/
.cover-page {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(bottom left, #7083ff, #75a1ff);
  background-image: linear-gradient(to top right, #7083ff, #75a1ff);
}
/*给封底页添加渐变属性和大小*/
.end-page {
  background-image: -webkit-linear-gradient(bottom left, #6e9aff, #5d7bff);
  background-image: linear-gradient(to top right, #6e9aff, #5d7bff);
  width: 100%;
  height: 100%;
}
/*给内容页添大小定位以及默认底色和边框*/
.inside-page {
  width: 96%;
  height: 96%;
  left: 0;
  top: 2%;
  border: 1px lightgray solid;
  background-color: #fcf9f4;
}
/*开启css中的3D*/
.boxbook {
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.boxbook view {
	/*旋转方向向左 详细解释在下面*/
	/*-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。*/
  -webkit-transform-origin: left;
          transform-origin: left;
}
/* nth-of-type(*)是选择器匹配同类型中的第n个同级兄弟元素-从1开始 */
.boxbook view:nth-of-type(1) {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.boxbook view:nth-of-type(2) {
  -webkit-transform: rotateY(5deg);
          transform: rotateY(5deg);
}
.boxbook view:nth-of-type(3) {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}
.boxbook view:nth-of-type(4) {
  -webkit-transform: rotateY(15deg);
          transform: rotateY(15deg);
}
.boxbook view:nth-of-type(5) {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}
.boxbook view:nth-of-type(6) {
  -webkit-transform: rotateY(25deg);
          transform: rotateY(25deg);
}

/*鼠标离开页面回翻的旋转时间*/
.boxbook view:nth-of-type(1) {
  -webkit-transition: 1s;
  transition: 1s;
}
.boxbook view:nth-of-type(2) {
  -webkit-transition: 0.9s;
  transition: 0.9s;
}
.boxbook view:nth-of-type(3) {
  -webkit-transition: 0.8s;
  transition: 0.8s;
}
.boxbook view:nth-of-type(4) {
  -webkit-transition: 0.7s;
  transition: 0.7s;
}
.boxbook view:nth-of-type(5) {
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.boxbook view:nth-of-type(6) {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
/*鼠标悬停时的旋转角度和旋转时间*/
.boxbook:hover view:nth-of-type(1) {
  -webkit-transform: rotateY(-160deg);
          transform: rotateY(-160deg);
  -webkit-transition: 1s;
  transition: 1s;
}
.boxbook:hover view:nth-of-type(2) {
  -webkit-transform: rotateY(-150deg);
          transform: rotateY(-150deg);
  -webkit-transition: 1.3s;
  transition: 1.3s;
}
.boxbook:hover view:nth-of-type(3) {
  -webkit-transform: rotateY(-140deg);
          transform: rotateY(-140deg);
  -webkit-transition: 1.5s;
  transition: 1.5s;
}
.boxbook:hover view:nth-of-type(4) {
  -webkit-transform: rotateY(-130deg);
          transform: rotateY(-130deg);
  -webkit-transition: 1.7s;
  transition: 1.7s;
}
.boxbook:hover view:nth-of-type(5) {
  -webkit-transform: rotateY(-1deg);
          transform: rotateY(-1deg);
  -webkit-transition: 1.75s;
  transition: 1.75s;
}
.boxbook:hover view:nth-of-type(6) {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transition: 1.85s;
  transition: 1.85s;
}

知识点

1.transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
2.nth-of-type(*)是选择器匹配同类型中的第n个同级兄弟元素-默认从1开始
首先看
3. transition 动画持续时间
4.:hover 鼠标移入-在小程序中表现效果是点击