.container {
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
div[class*='card-container-'] {
  position: relative;
  /* margin: 20px auto; */
  width: 150px;
  height: 200px;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.card h1 {
  font-size: 2em;
  font-weight: 600;
  -webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

.card-container-3 {
  color: #998100;
}
.card-container-3 .controller {
  cursor: pointer;
  cursor: hand;
  position: absolute;
  z-index: 200;
  top: 0;
  width: 72px;
  height: 45px;
  background: none;
}
.card-container-3 .controller.left {
  left: 0;    top: 200%;
  background:url(../images/left.png)no-repeat;
}
.card-container-3 .controller.right {
  right: 0;    top: 200%;
  background:url(../images/right.png)no-repeat;
}
.card-container-3 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
}
.card-container-3 .card:first-of-type {
  z-index: 100;
}
.card-container-3 .card:nth-of-type(2) {
  z-index: 90;
}
.card-container-3 .card:last-of-type {
  z-index: 80;
}
.card-container-3 .right:hover ~ .card:first-of-type {
  -webkit-transform: rotateY(20deg) translateZ(0px);
          transform: rotateY(20deg) translateZ(0px);
}
.card-container-3 .right:hover ~ .card:nth-last-of-type(2) {
  -webkit-transform: rotateY(20deg) translateZ(-100px);
          transform: rotateY(20deg) translateZ(-100px);
}
.card-container-3 .right:hover ~ .card:last-of-type {
  -webkit-transform: rotateY(20deg) translateZ(-200px);
          transform: rotateY(20deg) translateZ(-200px);
}
.card-container-3 .left:hover ~ .card:first-of-type {
  -webkit-transform: rotateY(-20deg) translateZ(0px);
          transform: rotateY(-20deg) translateZ(0px);
}
.card-container-3 .left:hover ~ .card:nth-last-of-type(2) {
  -webkit-transform: rotateY(-20deg) translateZ(-100px);
          transform: rotateY(-20deg) translateZ(-100px);
}
.card-container-3 .left:hover ~ .card:last-of-type {
  -webkit-transform: rotateY(-20deg) translateZ(-200px);
          transform: rotateY(-20deg) translateZ(-200px);
}