.body
  .content Here is title
  .sl.slice01
    span.overlay
    .sl.slice02
      span.overlay
      .sl.slice03
        span.overlay
        .sl.slice04
          span.overlay
          .sl.slice05
            span.overlay

@import compass

$fold:    45deg



body
  padding: 40px
  font-family: Lato,sans-serif
  font-size: 1em
  font-weight: 300
  

.body
  -webkit-perspective: 800
  position: relative
  width: 400px
  height: 200px
  background-color: hsl(340,50%,50%)
  +background(linear-gradient( left, hsl(340,80%,20%) 40%, hsl(340,50%,50%) 80% ))
    
  > .content
    position: absolute
    right: 20px
    top: 20px
    color: #fff     
  
.overlay
  width: 100%
  height: 100%
  background-color: rgba(0,0,0,0)
  display: block
  position: absolute
  overflow: hidden
  
.sl
  width: 81px
  height: 200px
  position: absolute
  -webkit-transform-style: preserve-3d
  -webkit-transform-origin: left center
  background-color: #f5f5f5
    
.slice02,  
.slice03,
.slice04,  
.slice05
  left: 100%
  margin-left: -1px
  

.slice01,
.slice03,
.slice05
  +transform(rotateY($fold*-2))
  & > .overlay
    +background(linear-gradient(left, hsla(200,50%,20%,.25), hsla(200,50%,20%,.15) 50%))
    
.slice02,
.slice04
  +transform(rotateY($fold*2))
    
  > .overlay
    &:before
      +background(linear-gradient(left, hsla(200,50%,20%,.5) 50%, hsla(200,50%,20%,.75)))
      +transform(skewY(-45deg) scaleX(.5))
      +transform-origin(right)
      +box-shadow(-5px 0px 0 hsla(200,50%,20%,.25), -10px 0px 0 hsla(200,50%,20%,.15), -15px 0px 0 hsla(200,50%,20%,.1))
      content: ' '
      width: 100%
      height: 100%
      overflow: hidden
      position: absolute
      left: 0
      top: 0
      opacity: .25    
      
      
.slice01
  left: 0
  +transform(rotateY($fold*-1))

.body
  .sl,
  .overlay
    +transition(all 1s ease)
    &:before
      +transition(all 1s ease)
    
.body:hover
  .sl
    +transform(rotateY(0))
      
  .overlay
    opacity: 0
    &:before
      +transform(skewY(-90deg) scaleX(.5))
        

.slice02
  background-position: -81px 0
.slice03
  background-position: -81px*2 0
.slice04
  background-position: -81px*3 0
.slice05
  background-position: -81px*4 0