-(1..8).each do |i|
  .trap
.book
  -(1..7).each do |i|
    .page
%p Move mouse cursor from left to right/ right to left.

$n: 7;
$w: 10em;
$h: $w*1.5;
$starta: 45deg;
$a: $starta/$n;
$imgs: 
  'https://images.unsplash.com/photo-1545137418-4f1e60820cd9' 
  
  'https://images.unsplash.com/photo-1615196618116-10555dae6c63' 
  
  'https://images.unsplash.com/photo-1587372653831-820c40aa336d' 
  
  'https://images.unsplash.com/photo-1629142192349-c1fc17688010' 
  
  'https://images.unsplash.com/photo-1591699335321-5adb2e169cbc' 
  
  'https://images.unsplash.com/photo-1560178596-f61fc7a84a97' 
  
  'https://images.unsplash.com/photo-1606804236267-cf394e7362eb' 
  ;
$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% 50%;
    background-size: 200%;
    content: '';
  }
  &:after {
    border-radius: .5em 0 0 .5em;
    transform: rotateY(180deg);
    background-position: 0 50%
  }
  @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)}?w=600');
        background-color: hsl($i*360/$n, 90%, 70%)
      }
      &:after {
        box-shadow: inset .125em 0 .5em 
          hsl(($i + 1)*360/$n, 100%, 70%);
        background-image: url('#{nth($imgs, ($i + 1)%$len + 1)}?w=600');
        background-color: hsl(($i + 1)*360/$n, 100%, 65%)
      }
    }
  }
}