@import "compass";
@import "compass/reset";
@import "scaffy/mixins";
@include webfont('awesome','awesome');
$width:600;
$height:400;
.icon{
  font-family:'awesome';
}
.demo{
  .container{
    margin-left:auto;
    margin-right:auto;
    @include size($width,$height);
    position:relative;
    ul{
      list-style:none;
    }
    li img{
      @include size(600,400);
      vertical-align:middle;
    }
    &>.next,&>.prev{
      color:rgba(#fff,.3);
      text-decoration:none;
      background-color:rgba(#000,.2);
      @include size(40,80,center);
      border-radius:5px;
      margin-top:-40px;
      line-height:80px;
      position:absolute;
      top:50%;
      font-size:40px;
      @include transform(scale3d(0.8,0.8,0.8));
      @include transition(all ease 400ms);
      &:hover{
        background-color:rgba(#000,.3);
        color:rgba(#fff,.6);
        @include transform(scale3d(1,1,1));
      }
    }
    &>.prev{
      left:10px;
    }
    &>.next{
      right:10px;
    }
  }
}


.pic-index{
  @include pos(right,10px,bottom,10px);
  cursor:pointer;
  li{
    @include square(20);
    margin-right:10px;
    display:inline-block;
    background-color:rgba(#fff,.4);
    border-radius:100%;
    @include transform(scale3d(0.8,0.8,0.8));
    @include transition(all ease 400ms);
    &.cur,&:hover{
      background-color:rgba(#fff,.8);
      @include transform(scale3d(1,1,1));
    }
  }
}

.container{
  position:relative;
  overflow:hidden;
}

@-webkit-keyframes slideLeft{
  100%{
    -webkit-transform:translateX(#{$width * 1}px);
  }
}
@-webkit-keyframes slideRight{
  100%{
    -webkit-transform:translateX(#{$width * -1}px);
  }
}
@-webkit-keyframes slideTop{
  100%{
    -webkit-transform:translateY(#{$height * 1}px);
  }
}
@-webkit-keyframes slideDown{
  100%{
    -webkit-transform:translateY(#{$height * -1}px);
  }
}
.x_list{
  position:relative;
  &.prev_h{
    -webkit-animation:400ms ease slideLeft;
  }
  &.next_h{
    -webkit-animation:400ms ease slideRight;
  }
  &.prev_v{
    -webkit-animation:400ms ease slideTop;
  }
  &.next_v{
    -webkit-animation:400ms ease slideDown;
  }
  li{
    position:absolute;
    &.cur,&.prev,&.next{
      display:block;
    }
    display:none;
    &.cur{
      @include transform(translate3d(0,0,0) rotate3d(0,0,0,0));
      left:0;
      top:0;
    }
    &.prev_h{
      display:block;
      left:#{$width * -1}px;
    }
    &.next_h{
      display:block;
      left:#{$width * 1}px;
    }
    &.prev_v{
      display:block;
      top:#{$height * -1}px;
    }
    &.next_v{
      display:block;
      top:#{$height * 1}px;
    }
  }
}

.container{
  @include perspective(1000px);
}
.cube-list{
  $a:#{$width * 0.5}px;
  @include transition(400ms);
  @include transform-style(preserve-3d);
  @include transform(translateZ(-$a) rotateX(0) rotateY(0));
  overflow:visible!important;
  &.next1{
    @include transform(translateZ(-$a) rotateX(0) rotateY(-90deg));
  }
  &.next2{
    @include transform(translateZ(-$a) rotateX(0) rotateY(-180deg));
  }
  &.next3{
    @include transform(translateZ(-$a) rotateX(0) rotateY(-270deg));
  }
  li{
    display:block;
    left:0!important;
  }
  li:nth-child(1){
    @include transform(translateZ($a));
  }
  li:nth-child(2){
    @include transform(rotateY(90deg) translateZ($a));
  }
  li:nth-child(3){
    @include transform(rotateY(180deg) translateZ($a));
  }
  li:nth-child(4){
    @include transform(rotateY(-90deg) translateZ($a));
  }
}