<!-- controls --> 
ROTATION:
<input class="plan" type="radio" name="view" value="Plan"  /> Spine
<input class="front" type="radio" name="view" value="Front"  /> Front
<input class="left" type="radio" name="view" value="Left"  /> Right 
<input class="animate"  type="radio" name="view" value="animate" checked /> Animate<br />

<p>CAMERA:</p>
<input class="camera-worm" type="radio" name="camera" value="camera-worm"  /> Worm
<input class="camera-center" type="radio" name="camera" value="camera-center" checked />  Normal
<input class="camera-crow" type="radio" name="camera" value="camera-crow"  />  Crow


<!-- stage-->
<div id="book" class="stage"> 
  
  <div class="book_group">
    
    <div class="book_back"></div>
    
    <div class="book_front">
      <div class="book_front_trim">
        <img src="https://raw.githubusercontent.com/alexmwalker/Complete-Cover-Archive/master/php6/php6.png" />
      </div>
    </div>
    
  </div>
  
</div>

@import "compass/css3";

body{
  font-family: sans-serif;
}

/* VARIABLES - FEEL FREE TO EDIT THESE */
$bookheight: 400px; /* Render size */

$book_graphic: "https://raw.githubusercontent.com/alexmwalker/Complete-Cover-Archive/master/jsnovice2/jsnovice2.png";
$book_graphic: "https://raw.githubusercontent.com/alexmwalker/Complete-Cover-Archive/master/adobexd1/adobexd1.png";
$book_graphic: "https://raw.githubusercontent.com/alexmwalker/Complete-Cover-Archive/master/uxuseresearch1/uxuseresearch1.png";
$book_graphic: "https://raw.githubusercontent.com/alexmwalker/Complete-Cover-Archive/master/php6/php6.png?3r";
$book_graphic:"https://cdn.rawgit.com/alexmwalker/Complete-Cover-Archive/master/performance1/SVG/Backend-spread.svg";

$speed: 25s ; /* Animation speed */

/* CALCULATED VALUES */
$bookwidth:($bookheight*0.70); //
$bookwidth:($bookheight*0.76); // anthology height
$bookspine: ($bookheight*0.07); // .05 for thin books. 0.1 for thick books
$bookshadow: ($bookheight/16);
$perspective: $bookheight*2.7;

$LEgradient: linear-gradient( // lighting effects gradient
      90deg, 
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.25) 25%, 
      rgba(0,0,0,0.15) 50%, 
      rgba(255,255,255,0) 100%
  );

//$LEgradient: url($book_graphic);

.stage { /* The frame or lens */
  width: $bookwidth; 
  height: $bookheight;
  perspective: $perspective;
  margin: 5% 3%;
  position: relative;
  float: left;
  outline:1px #f00 border;
  perspective-origin: 50% 50%;
}
.camera-crow { /* crow's view */
  perspective-origin: 0 -55%;
}
.camera-worm { /* worm view */
  perspective-origin: 0 100%;
}
.book_group{
  transform-style: preserve-3d; 
  transform-origin: 50% 50% 50%;
  transform: rotateY(0deg) rotateX(0deg); //default view
}
.book_front, .book_back{
  width: $bookwidth;
  height: $bookheight;
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ($bookspine/2);
  position: absolute;   
  background: #666;
  background-position: -250% 100%, right top, center top, left top ;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%; 
  &:before, &:after{ // shared attributes
    content: "";
    display: block;
    position: absolute;
    z-index: -1; 
    transform-origin: 0% 0%;
    width: $bookspine;
    height: $bookheight;
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(200,200,200,1) 100%); //default fallback offwhite
  }
  &:before{ // spine
    background-image: 
      $LEgradient,
      url(none),
      url($book_graphic),
      url(none);
    background-position: -400% 100%, right top, center top, left top ;
    background-size: 1000% 200%, auto 100%, auto 100%, auto 100%; 
    transform: rotateY(-90deg) translateX(-$bookspine);
  }
  &:after{  // right edge
    transform: rotateY(90deg) translateZ($bookwidth);
  }
}
.book_front_trim{ /* Trim that IMG tag to cover side -graceful*/
    height: 100%;
    position: absolute;
    width: $bookwidth;
    overflow: hidden;
  }
  img{
    position: absolute;
    height: 100%;
    right: 0;
    visibility:hidden;
  }
//book backcover
.book_back{
  transform: rotateY(180deg) translateZ($bookspine/2); 
  width: $bookwidth;
  height: $bookheight;  
  z-index:-1;
  background-image: 
      $LEgradient,
      url(none),
      url(none),
   url($book_graphic);
  background-size: auto 100%, auto 100% ;
  background-position: top left;
  
   &:before{ //   bottom edge 
     height: $bookwidth;
     z-index:-1;
     background: #eee;
     transform: 
       rotateX(90deg) rotateZ(-90deg) translateZ(-$bookheight);
     box-shadow: 0px 0px $bookshadow 4px rgba(0, 0, 0, 0.55);
   }
  &:after{ //  top edge
    height: $bookwidth;
    z-index:-1;
    background: #eee;
    transform: 
    rotateX(90deg) rotateZ(-90deg);
  }
}
.book_front{
  z-index: 1; 
  background-image: 
      $LEgradient,
      url($book_graphic),
      url(none),
      url(none);
  background-position: -200% 100%, right top, center top, left top ;
  background-size: 200% 200%, auto 100%, auto 100%, auto 100%; 
  width: $bookwidth;
  height: $bookheight;
  //background: #ddd; //de
}

// Views



/* ANIMATION */
@keyframes rotate {
  0% { transform: rotateY(0) ; }
  100% { transform: rotateY(360deg) }
}

@keyframes lightingeffect { 
0% { 
  background-position: -200% 100%, right top, center top, left top ;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;  
  }
25% { 
  background-position: -200% 100%, right top, center top, left top ;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;  
  }
50% { 
  background-position: 0% 100%, right top, center top, left top ;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;  
  }
75% {
  background-position: 200% 0, right top, center top, left top;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
100% {
  background-position: 200% 0, right top, center top, left top;
  background-size: 500% 200%, auto 100%, auto 100%, auto 100%;
  }
}
  




/* BOOK VIEW CONTROLS */
/* These are just for the playing with the demo */
.plan[type=radio]:checked ~ .stage .book_group{  
  transform: rotateY(40deg) rotateX(0deg) ; 
}
.front[type=radio]:checked ~ .stage .book_group{  
  transform: rotateY(0deg) rotateZ(0deg) ; 
}
.left[type=radio]:checked ~ .stage .book_group{  
  transform: rotateY(-15deg) rotateX(0deg) ; 
} 
.animate[type=radio]:checked ~ .stage .book_group{  
  animation: rotate $speed infinite linear; 
} 

.animate[type=radio]:checked ~ .stage .book_back{  
  animation: lightingeffect $speed infinite linear ; 
  animation-delay: $speed/4; 
} 

.animate[type=radio]:checked ~ .stage .book_front{  
  animation: lightingeffect $speed infinite linear; 
  animation-delay: -$speed/4;
} 

.animate[type=radio]:checked ~ .stage .book_front:before{  
  animation: lightingeffect $speed infinite linear; 
  animation-delay: 0;
} 
// perspective-origin moves the camera up and down
.camera-worm[type=radio]:checked ~ .stage {  
   perspective-origin: 0 100%; 
} 
.camera-center[type=radio]:checked ~ .stage {  
  perspective-origin: 50% 50%;  
} 
.camera-crow[type=radio]:checked ~ .stage {  
  perspective-origin: 0 -50%;  
} 
body {text-align:center}