@charset "utf-8";
/* CSS Document */
.frame{
  margin:30px 0px 0px 25%;
  cursor:pointer;
}

.frame div{
  transform-origin:0% 50%;
  position:absolute;
  width:160px;
  height:226px;
}

.cover{
  background: 
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("http://betanews.com/wp-content/uploads/2014/06/coming-soon-bigger-600x600.jpg");
  background-size: 0, cover;
  
  font-family: 'Montserrat', sans-serif;
  text-align:right;
  font-size:1.4em;
  letter-spacing:10px;
}

.page{
  background:#000000;
}

.front{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-45deg)
}

.one{
  opacity:0.5;
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-40deg)
}

.two{
  opacity:0.4;
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-35deg)
}

.three{
  opacity:0.3;
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-30deg)
}

.four{
  opacity:0.5;
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-25deg)
}

.back{
  opacity:0.5;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-180deg)
}

/* Animation */

.frame:hover .front{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-80deg)
}

.frame:hover .one{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-70deg)
}

.frame:hover .two{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-60deg)
}

.frame:hover .three{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-50deg)
}

.frame:hover .four{
  transform-style:preserve-3d;
  transition: 0.5s ease all;
  transform:perspective(1000px) rotateY(-40deg)
}