Umblättereffekt

Nette Idee: http://5202.blogspot.com/2011/12/skizzenbuch-cool-ratzinger-schematisch.html

by Jens Grochtdreis

HTML

<div class="ped">grey
   <div><div>orange</div>
   <div><div>green</div></div>
   <div><div>blue</div></div></div>
</div>

CSS

div.ped {
  width:300px; 
  height:200px; 
  padding: 0 0 20px 0; 
  margin:20px auto; 
  position:relative; 
  overflow:hidden; 
  background:#e8e8e8; 
  border:20px solid #e8e8e8; 
  border-width:20px 20px 0 20px;
}
div.ped > div {
  width:150px; 
  height:200px; 
  position:relative; 
  float:right;
}
div.ped > div > div:nth-of-type(1) {
  width:150px; 
  height:200px; 
  position:absolute; 
  left:0; 
  top:0;  
  background: orange;
}
div.ped > div > div:nth-of-type(2),
div.ped > div > div:nth-of-type(2) div{
  -webkit-transform-origin: 0 -450px;
     -moz-transform-origin: 0 -450px;
      -ms-transform-origin: 0 -450px;
       -o-transform-origin: 0 -450px;
          transform-origin: 0 -450px;
  -webkit-transition: 0.75s ease-in-out;
     -moz-transition: 0.75s ease-in-out;
      -ms-transition: 0.75s ease-in-out;
       -o-transition: 0.75s ease-in-out;
          transition: 0.75s ease-in-out;
}
div.ped > div > div:nth-of-type(3),
div.ped > div > div:nth-of-type(3) div {
  -webkit-transform-origin: 150px -450px;
     -moz-transform-origin: 150px -450px;
      -ms-transform-origin: 150px -450px;
       -o-transform-origin: 150px -450px;
          transform-origin: 150px -450px;
  -webkit-transform: rotate(-17deg);
     -moz-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
       -o-transform: rotate(-17deg);
          transform: rotate(-17deg);
  -webkit-transition: 0.75s ease-in-out;
     -moz-transition: 0.75s ease-in-out;
      -ms-transition: 0.75s ease-in-out;
       -o-transition: 0.75s ease-in-out;
          transition: 0.75s ease-in-out;
}
div.ped > div > div:nth-of-type(3) div {
  width:149px; 
  height:200px; 
  position:absolute; 
  left:0; 
  top:0; 
  background:blue; 
  border-right:1px solid #888;
  -webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
          box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
} 
div.ped > div > div:nth-of-type(2) {
  width:150px; 
 ...