* {
  margin: 0;
}
body {
  background-color: #2f2f2f;
}
.wrapper {
  max-width: 900px;
  margin: 80px auto;
}
.wrapper li {
  position: relative;
  width: 480px;
  height: 180px;
  list-style: none;
  margin: 5px;
  display: inline-block;
  perspective: 300px;
}
.picBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -90px;
  animation: 200ms ease-out 0ms 1 normal forwards;
}

.show,
.hide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hide {
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 180px;
  transform: translate3d(0, 0, -1px);
  /* 3D空间内移动一个元素的位置 */
}

.in-top .hide,
.out-top .hide {
  transform-origin: 0% 100%;
  transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}
.in-top .picBox {
  animation-name: in-top;
  animation-play-state: running;
}
.out-top .picBox {
  animation-name: out-top;
  animation-play-state: running;
}
@keyframes in-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
}

@keyframes out-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
.in-bottom .hide,
.out-bottom .hide {
  transform-origin: 0% 0%;
  transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}
.in-bottom .picBox {
  animation-name: in-bottom;
  animation-play-state: running;
}
.out-bottom .picBox {
  animation-name: out-bottom;
  animation-play-state: running;
}
@keyframes in-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 90deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}