-(1..8).each do |i|
  .trap
.book
  -(1..7).each do |i|
    .page
%p Move mouse cursor from left to right/ right to left.
View Compiled
$n: 7;
$w: 10em;
$h: $w*1.5;
$starta: 45deg;
$a: $starta/$n;
$imgs: 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/lions-males-botswana_612_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/571/overrides/cheetah-cub-melon-990_57130_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/057/cache/african-elephant-record_5790_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-panda_680_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/275/cache/asiatic-leopard-cub_27528_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/snow-leopard_712_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/275/cache/mom-tiger-licking-cub_27537_600x450.jpg' 
  'http://images.nationalgeographic.com/wpf/media-live/photos/000/275/cache/leopard-cub-lying-on-ground_27530_600x450.jpg';
$len: length($imgs);

html, body, .trap { height: 100%; }

body { margin: 0; background: dimgrey; }

p {
  position: absolute;
  z-index: -1;
  padding: 1em;
  color: white;
  font: 1.25em trebuchet ms, century gothis, verdana, sans-serif;
  pointer-events: none;
}

.trap {
  float: left;
  width: 100%/($n + 1);
  @for $i from 0 to $n + 1 {
    &:nth-child(#{$i + 1}):hover ~ .book .page {
      @for $j from 0 to $n {
        &:nth-child(#{$j + 1}) {
          @if $j < $i {
            //z-index: (-($i - $j) + 1)*$n;
            transform: rotateY(-180deg + $starta - ($i - $j)*$a);
          }
          @else {
            //z-index: ($i - $j)*$n;
            transform: rotateY(-($i - $j)*$a - $starta);
          }
        }
      }
    }
  }
}

.book, .book *, .book :before, .book :after {
  box-sizing: border-box;
  position: absolute;
  transform-style: preserve-3d;
}

.book {
  z-index: -1;
  top: 50%; left: 50%;
  perspective: 40em;
  pointer-events: none;
}

.page {
  top: 50%; left: 50%;
  margin: -$h/2 0;
  width: $w; height: $h;
  transform-origin: 0 50%;
  transition: .5s;
  &:before, &:after {
    width: inherit; height: inherit;
    border-radius: 0 .5em .5em 0;
    backface-visibility: hidden;
    background-position: 100% 0;
    background-size: 200% 100%;
    content: '';
  }
  &:after {
    border-radius: .5em 0 0 .5em;
    transform: rotateY(180deg);
    background-position: 0 0;
  }
  @for $i from 0 to $n {
    &:nth-child(#{$i + 1}) {
      z-index: -$i;
      &:before {
        box-shadow: inset -.125em 0 .5em 
          hsl($i*360/$n, 100%, 70%);
        background-image: url(nth($imgs, $i%($len - 1) + 1));
      }
      &:after {
        box-shadow: inset .125em 0 .5em 
          hsl(($i + 1)*360/$n, 100%, 70%);
        background-image: url(nth($imgs, $i%($len - 1) + 2));
      }
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.