CSS3 で作成した本のページめくり効果

<!-- よろしければハートを付けてください! -->
<div id='本'>
  <div id='トップ'></div>
  <div id='フロント'></div>
  <div id='右'></div>
  <div id='下'></div>
  <div id='影'></div>
  <div id='ブックマーク'>
    <div>
      <div>
        <div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <div id='ブックマークシャドウ'></div>
</div>
<div id='フリップ'>
  <div id='前面'>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id='戻る'>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<h4>CSS 3D 曲げ効果 - ページ フリップ</h4>

/* 必ず - transform-style: preserve-3d; を使用してください */
html、本文{
  高さ:100%;
  オーバーフロー: 非表示;
}
体 {
  背景: 放射状グラデーション(#E4CEA6, #9C8763);
  パースペクティブ: 900px;
  マージン: 0;
}
#反転{
  アニメーション: ラッパー 6 秒の easy-in-out 無限;
  高さ: 350ピクセル;
  幅: 253px; 
  位置: 絶対;
  左: 50%;
  上位: 30%
  変換: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!重要;
  変換スタイル: 3D を保持します。
  変換の原点: 0 0 0;
}
@keyframes ラッパー {
  50% {
    変換: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }
}
#反転div{
  高さ: 350ピクセル;
  幅: 24px;
  位置: 絶対;
  左: calc(100% - 1px);
  変換原点: 0 100%;
  変換スタイル: 3D を保持します。
  背景サイズ: 253px 350px;
}
#フリップ #フロント、 
#flip #front div {
  背景画像: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
  ボックスシャドウ: インセット rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
}
#flip #front > div > div > div > div > div > div > div > div > div > div > div { 
  ボックスの影: インセット rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* ページの重なりを避ける */
#裏返す、
#反転 #戻る div {
  背景画像: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
}

#flip > div { 左: 0; 背景位置x: 0; }
#flip div > div { background-position-x: -23px; animation: page 6s easy-in-out infinite; }
#反転 div > div > div { background-position-x : -46px; } 
#反転 div > div > div > div { background-position-x : -69px; }
#反転 div > div > div > div > div { background-position-x : -92px; }
#反転 div > div > div > div > div > div { background-position-x : -115px; }
#反転 div > div > div > div > div > div > div { background-position-x : -138px; }
#反転 div > div > div > div > div > div > div > div { background-position-x : -161px; }
#flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
/* ピースの数が多いほど、曲げが滑らかになります */

@keyframes ページ {
  15% { 変換: 回転Y(-10度); }
  50% { 変換: rotateY(-2deg); }
  65% { 変換: rotateY(10deg); }
  100% { 変換: rotateY(0deg); }
}

＃本 {
  幅: 248ピクセル;
  高さ: 350ピクセル;
  位置: 絶対;
  残り:50%;
  上位: 30%
  変換: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
  変換スタイル: 3D を保持します。
  -webkit-transform-origin: 0 0 0;
}
@keyframes ブック {
  25% {
    ボックスシャドウ: インセット rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  50% {
    ボックスシャドウ: インセット rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  100% {
    ボックスシャドウ: インセット rgba(0,0,0,.2) 510px 0 50px -140px;
  }
}
#本 #トップ {
  アニメーション: ブック 6s イーズインアウト 無限;
  背景: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
  背景サイズ: 100% 100%;
  背景位置: 100%;
  ボックスシャドウ: インセット rgba(0,0,0,0.2) 510px 0 50px -140px;
  高さ: 350ピクセル;
  幅: 248ピクセル;
  位置: 絶対;
  左: 0;
  上: 0;
}
#本 #下 {
  背景: #E7DED1;
  ボックスシャドウ: rgba(83, 53, 13, 0.2) 4px 2px 1px,
              #35582C 1px 1px 0px 0px;
  高さ: 350ピクセル;
  幅: 253px;
  位置: 絶対;
  変換: translateZ(-40px);
  左: 0;
  上: 0;
}
#本 #影
  アニメーション: 影 6 秒、イーズイン アウト、無限;
  ボックスシャドウ: インセット rgba(83, 53, 13, 0) -200px 0 150px -140px;
  高さ: 350ピクセル;
  幅: 248ピクセル;
  位置: 絶対;
  左: -100%;
  上: 0;
  変換: translateZ(-40px);
}
@keyframes シャドウ {
  20% {
    ボックスシャドウ: インセット rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
  50% { 
    ボックスシャドウ: インセット rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
  }
  60% { 
    ボックスシャドウ: インセット rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
}
#本 #表紙 {
  背景: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
  背景サイズ: 100% 2px; 
  ボックスシャドウ: インセット #C2BBA2 3px 0 0px、#35582C -2px 1px 0px 0px;
  高さ: 40px;
  幅: 251ピクセル;
    左: -3px;
  位置: 絶対;
  下: -40px;
  変換: rotateX(-90deg);
  変換原点: 50% 0;
  左上の境界線の半径: 5px;
  左下の境界線の半径: 5px;
}
#本 #権利 {
  背景: -webkit-linear-gradient(左、#DDD2BB、#BDB3A0);
  背景サイズ: 2px 100%; 
  ボックスシャドウ: インセット rgba(0,0,0,0) 0 0 0 20px;
  高さ: 100%;
  幅: 40px;
  位置: 絶対;
  右: -40px;
  上: 0;
  変換: rotateY(90deg);
  変換原点: 0 50%;
}

h4 {
  位置: 絶対;
  下: 20px;
  左: 20px;
  マージン: 0;
  フォントの太さ: 200;
  不透明度: 1;
	フォントファミリー: サンセリフ;
  色: rgba(0,0,0,0.3); 
}

/* ブックマーク */

#ブックマーク{
  位置: 絶対;
  変換: translate3d(20px,350px,-16px);
  変換スタイル: 3D を保持します。
}
#ブックマーク div {
  背景: rgb(151, 88, 88);
  ボックスシャドウ: rgb(133,77,77) 1px 0;
  高さ: 10px;
  幅: 20px;
  位置: 絶対;
  上: 9px;
  変換: rotateX(-14deg);
  変換原点: 50% 0;
  変換スタイル: 3D を保持します。
}
#ブックマーク > div > div {
  背景: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#ブックマーク > div > div > div {
  背景: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
}
#ブックマーク > div > div > div > div {
  背景: なし;
  border-top: 0px 透明の実線;
  右境界線: 10px 実線 rgb(133, 77, 77);
  border-bottom: 10px 透明の実線;
  左境界線: 10px 実線 rgb(133, 77, 77);
  高さ: 0;
  幅: 0;
}
#ブックマークシャドウ {
  背景: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  高さ: 15px;
  幅: 20px;
  位置: 絶対;
  変換: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
  変換の原点: 0 0;
}