.box {
  width: 680px;
  padding: 50px;
  margin: auto;
  margin-top: -100px;
}

.swiper,
#swiper {
  width: 830px;
  height: 200px;
  position: relative;
}

.swiper div {
  display: block;
  position: absolute;
  /* width: 300px; */
  height: 400px;
  overflow: hidden;
  left: 165px;
  top: 0;
  transition: 0.5s;
  color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 200px;
}


.swiper .a {
  opacity: 1;
  z-index: 23;
  -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-25deg);
  -ms-transform: translateX(255px) translateZ(-300px) rotateY(-25deg);
  transform: perspective(500px) translateX(300px) translateZ(-253px)
    rotateY(-25deg);
  /* -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3))); */
}

.swiper .b {
  opacity: 1;
  z-index: 33;
  /* -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3))); */
  transform: translateX(0) translateZ(-100px) rotateY(0deg);
}

.swiper .c {
  opacity: 1;
  z-index: 23;
  /* -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3))); */
  -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-25deg);
  -ms-transform: translateX(255px) translateZ(-300px) rotateY(-25deg);
  transform: perspective(500px) translateX(-300px) translateZ(-253px)
    rotateY(20deg);
}

.swiper .dd {
  opacity: 0;
  z-index: -1;
  -webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
  -ms-transform: translateX(0) translateZ(-300px) rotateY(0);
  transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
}
/*屏幕小于900px时*/
@media only screen and (max-width: 900px) {
  .box {
    width: 80%;
    padding: 10px;
    margin:  auto;
    margin-top: 0;

  }
  .swiper div {
    display: block;
    position: absolute;
    /* width: 200px; */
    height: 400px;
    overflow: hidden;
    left: 30px;
    top: 0;
    transition: 0.5s;
    color: #fff;
    font-size: 50px;
    text-align: center;
    line-height: 200px;
  }
  .swiper div img {
    width: 100%;
  }
  .swiper,
  #swiper {
    width: 100%;
    /* height: 200px; */
    position: relative;
  }
}