css翻页效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

详细说明

知识就是力量，而知识来源于书籍；每当在阅读书籍时，我们都需要去翻开想要看的那一页，这次就来简单地实现下这个翻页的效果。
这个html结构非常的简单，只要七张页面就可以

  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>

结构好了之后就开始来给各个页面加样式，这里只给每个页面加上不同颜色加以区分。设定翻页就以页面的下面为翻转中心点，transform-style: preserve-3d;表示所有子元素在3D空间中呈现。

ul {
    position: relative;
    list-style: none;
    width: 200px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 100px auto;
    padding: 0;
    transform-origin: bottom;
    transform-style: preserve-3d;
}
li {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin:  left;
}
li:nth-of-type(1) {
  background-color: red;
}
li:nth-of-type(2) {
  background-color: orange;
}
li:nth-of-type(3) {
  background-color: yellow;
}
li:nth-of-type(4) {
  background-color: green;
}
li:nth-of-type(5) {
  background-color: greenyellow;
}
li:nth-of-type(6) {
  background-color: blueviolet;
}

到了这一步，书籍页面的结构和样式都已经完成了，剩下的就是要加上动画了。
鼠标移到书籍上，书籍会往下倒个20度。在倒下的同时加个过渡的效果。

ul:hover {
    transition: all 1s;
    transform: rotateX(20deg);
}

书籍倒下去之后就可以来翻页了，每一页开始翻页的时间是不一样的，第一页先翻开，再翻第二页，所以越靠后的页面要执行翻开页面的操作延迟时间就更久点。大概每1秒就翻开一页吧。
翻开角度也是不一样的，这个可以自己慢慢调整。

ul:hover li:nth-of-type(2) {
  transition: all 1s 5s;
  transform: rotateY(-50deg);
}
ul:hover li:nth-of-type(3) {
  transition: all 1s 4s;
  transform: rotateY(-70deg);
}
ul:hover li:nth-of-type(4) {
  transition: all 1s 3s;
  transform: rotateY(-110deg);
}
ul:hover li:nth-of-type(5) {
  transition: all 1s 2s;
  transform: rotateY(-130deg);
}
ul:hover li:nth-of-type(6) {
  transition: all 1s 1s;
  transform: rotateY(-150deg);
}

码上掘金代码展示