Mit CSS3 erstellte Buchseitenumblättereffekte

<!-- Wenn es dir gefällt, setz es bitte auf dein Herz! -->
<div id='Buch'>
  <div id='oben'></div>
  <div id='vorne'></div>
  <div id='rechts'></div>
  <div id='unten'></div>
  <div id='Schatten'></div>
  <div id='Lesezeichen'>
    <div>
      <div>
        <div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <div id='Lesezeichen-Schatten'></div>
</div>
<div id='umdrehen'>
  <div id='vorne'>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id='zurück'>
    <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-Biegeeffekt – Seite umblättern</h4>

/* Denken Sie daran, -transform-style: preserve-3d; zu verwenden. */
html, Text {
  Höhe: 100 %;
  Überlauf: versteckt;
}
Körper {
  Hintergrund: radialer Farbverlauf (#E4CEA6, #9C8763);
  Perspektive: 900px;
  Rand: 0;
}
#umdrehen {
  Animation: Wrapper 6s, unendliches Ein- und Aussteigen;
  Höhe: 350px;
  Breite: 253px; 
  Position: absolut;
  links: 50%;
  oben: 30%;
  transformieren: verschiebeZ(-10px) dreheX(60 Grad) dreheZ(29 Grad) dreheY(0 Grad)!wichtig;
  Transformationsstil: 3D bewahren;
  Transform-Ursprung: 0 0 0;
}
@keyframes-Wrapper {
  50 % {
    transformieren: verschiebeZ(-10px) dreheX(60 Grad) dreheZ(29 Grad) dreheY(-180 Grad);
  }
}
#flip div {
  Höhe: 350px;
  Breite: 24px;
  Position: absolut;
  links: berechnet (100 % – 1 Pixel);
  Transform-Ursprung: 0 100 %;
  Transformationsstil: 3D bewahren;
  Hintergrundgröße: 253px 350px;
}
#umdrehen #vorne, 
#flip #front div {
  Hintergrundbild: URL (http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
  Box-Schatten: Einschub 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 { 
  Box-Schatten: Einschub rgba(255,255,255,0,3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* Seitenüberlappung vermeiden */
#umdrehen #zurück,
#flip #zurück div {
  Hintergrundbild: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
}

#flip > div { links: 0; Hintergrundposition-x: 0; }
#flip div > div { Hintergrundposition-x: -23px; Animation: Seite 6s, Ein-Aus-Bewegung unendlich; }
#flip div > div > div { Hintergrundposition-x: -46px; } 
#flip div > div > div > div { Hintergrundposition-x: -69px; }
#flip div > div > div > div > div { Hintergrundposition-x: -92px; }
#flip div > div > div > div > div > div { Hintergrundposition-x : -115px; }
#flip div > div > div > div > div > div > div { Hintergrundposition-x : -138px; }
#flip div > div > div > div > div > div > div > div { Hintergrundposition-x : -161px; }
#flip div > div > div > div > div > div > div > div > div > div { Hintergrundposition-x : -184px; }
#flip div > div > div > div > div > div > div > div > div > div > div { Hintergrundposition-x: -207px; }
#flip div > div > div > div > div > div > div > div > div > div > div { Hintergrundposition-x: -229px; }
/* je mehr Stücke Sie haben, desto sanfter ist die Biegung */

@keyframes Seite {
  15 % { transform: rotateY(-10deg); }
  50 % { transform: rotateY(-2deg); }
  65 % { transform: rotateY(10deg); }
  100 % { transform: rotateY(0deg); }
}

#Buch {
  Breite: 248px;
  Höhe: 350px;
  Position: absolut;
  links: 50 %;
  oben: 30%;
  transformieren: verschiebe3d(0px,0px,-10px) dreheX(60 Grad) dreheZ(29 Grad);
  Transformationsstil: 3D bewahren;
  -webkit-transform-origin: 0 0 0;
}
@keyframes Buch {
  25 % {
    Box-Shadow: Einschub rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  50 % {
    Box-Shadow: Einschub rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  100 % {
    Box-Shadow: Einschub rgba(0,0,0,.2) 510px 0 50px -140px;
  }
}
#Buch #Top {
  Animation: Buch 6, unendliches Ein- und Aussteigen;
  Hintergrund: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
  Hintergrundgröße: 100 % 100 %;
  Hintergrundposition: 100 %;
  Box-Shadow: Einschub rgba(0,0,0,0,2) 510px 0 50px -140px;
  Höhe: 350px;
  Breite: 248px;
  Position: absolut;
  links: 0;
  oben: 0;
}
#Buch #unten {
  Hintergrund: #E7DED1;
  Boxschatten: rgba (83, 53, 13, 0,2) 4px 2px 1px,
              #35582C 1px 1px 0px 0px;
  Höhe: 350px;
  Breite: 253px;
  Position: absolut;
  transformieren: übersetzenZ(-40px);
  links: 0;
  oben: 0;
}
#Buch #Schatten
  Animation: Schatten 6 s, unendliches Ein- und Ausblenden;
  Box-Shadow: Einschub rgba(83, 53, 13, 0) -200px 0 150px -140px;
  Höhe: 350px;
  Breite: 248px;
  Position: absolut;
  links: -100%;
  oben: 0;
  transformieren: übersetzenZ(-40px);
}
@keyframes Schatten {
  20% {
    Box-Shadow: Einschub rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
  50 % { 
    Box-Shadow: Einschub rgba(83, 53, 13, 0,3) -350px 0 150px -140px;
  }
  60 % { 
    Box-Shadow: Einschub rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
}
#Buch #Front {
  Hintergrund: -webkit-linear-gradient(oben,#FCF6EA, #D8D1C3);
  Hintergrundgröße: 100 % 2px; 
  Box-Shadow: Einschub #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
  Höhe: 40px;
  Breite: 251px;
    links: -3px;
  Position: absolut;
  unten: -40px;
  transformieren: rotierenX(-90 Grad);
  Transform-Ursprung: 50 % 0;
  Rahmen oben links – Radius: 5px;
  Rahmen unten links – Radius: 5px;
}
#Buch #richtig {
  Hintergrund: -webkit-linear-gradient(links,#DDD2BB, #BDB3A0);
  Hintergrundgröße: 2px 100 %; 
  Box-Shadow: Einschub rgba(0,0,0,0) 0 0 0 20px;
  Höhe: 100%;
  Breite: 40px;
  Position: absolut;
  rechts: -40px;
  oben: 0;
  transformieren: Y-Drehung (90 Grad);
  Transform-Ursprung: 0 – 50 %;
}

h4 {
  Position: absolut;
  unten: 20px;
  links: 20px;
  Rand: 0;
  Schriftstärke: 200;
  Deckkraft: 1;
	Schriftfamilie: serifenlos;
  Farbe: rgba(0,0,0,0,3); 
}

/* Lesezeichen */

#Lesezeichen {
  Position: absolut;
  transformieren: übersetzen3d(20px,350px,-16px);
  Transformationsstil: 3D bewahren;
}
#bookmark div {
  Hintergrund: rgb(151, 88, 88);
  Kastenschatten: rgb(133,77,77) 1px 0;
  Höhe: 10px;
  Breite: 20px;
  Position: absolut;
  oben: 9px;
  transformieren: rotierenX(-14 Grad);
  Transform-Ursprung: 50 % 0;
  Transformationsstil: 3D bewahren;
}
#Lesezeichen > div > div {
  Hintergrund: linearer Farbverlauf (oben, RGB (151, 88, 88), RGB (189, 123, 123), RGB (151, 88, 88));
}
#Lesezeichen > div > div > div {
  Hintergrund: linearer Farbverlauf (oben, RGB (151, 88, 88), RGB (133, 77, 77));
}
#Lesezeichen > div > div > div > div {
  Hintergrund: keiner;
  Rahmen oben: 0px durchgehend transparent;
  Rahmen rechts: 10px durchgezogenes RGB (133, 77, 77);
  Rahmen unten: 10px durchgehend transparent;
  Rahmen links: 10px durchgezogenes RGB (133, 77, 77);
  Höhe: 0;
  Breite: 0;
}
#Lesezeichen-Schatten {
  Hintergrund: linearer Farbverlauf (oben, rgba (83, 53, 13, 0,25), rgba (83, 53, 13, 0,11));
  Höhe: 15px;
  Breite: 20px;
  Position: absolut;
  transformieren: übersetzen3d(12px,350px,-25px) drehenX(-90 Grad) schrägX(20 Grad);
  Transform-Ursprung: 0 0;
}