css3中一些常用的特效果（CSS3 制作的书本翻页特效）

<!-- Please heart it if you like! -->
<li id='book'>
  <li id='top'></li>
  <li id='front'></li>
  <li id='right'></li>
  <li id='bottom'></li>
  <li id='shadow'></li>
  <li id='bookmark'>
    <li>
      <li>
        <li>
          <li></li>
        </li>
      </li>
    </li>
  </li>
  <li id='bookmark-shadow'></li>
</li>
<li id='flip'>
  <li id='front'>
    <li>
      <li>
        <li>
          <li>
            <li>
              <li>
                <li>
                  <li>
                    <li>
                      <li></li>
                    </li>
                  </li>
                </li>
              </li>
            </li>
          </li>
        </li>
      </li>
    </li>
  </li>
  <li id='back'>
    <li>
      <li>
        <li>
          <li>
            <li>
              <li>
                <li>
                  <li>
                    <li>
                      <li></li>
                    </li>
                  </li>
                </li>
              </li>
            </li>
          </li>
        </li>
      </li>
    </li>
  </li>
</li>
<h4>CSS 3D Bending Effect - Page Flip</h4>

/* remember to use - transform-style: preserve-3d; */
html,body {
  height:100%;
  overflow: hidden;
}
body {
  background: radial-gradient(#E4CEA6, #9C8763);
  perspective: 900px;
  margin: 0;
}
#flip {
  animation: wrapper 6s ease-in-out infinite;
  height: 350px;
  width: 253px; 
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
}
@keyframes wrapper {
  50% {
    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }
}
#flip li {
  height: 350px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  transform-origin: 0 100%;
  transform-style: preserve-3d;
  background-size: 253px 350px;
}
#flip #front, 
#flip #front li {
  background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg" alt="css3中一些常用的特效果（CSS3 制作的书本翻页特效）" border="0" />