*{margin: 0;padding: 0;}
.swiper3D{
    position: relative;
    width: 100%;
    /*height: 400px;*/
    /*max-width: 640px;*/
    margin: 0 auto;
    background-color:#ccc ;
    color: #fff;
}
.swiper3D .swiper-wrapper{
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
    z-index: 1;
}
.swiper3D .swiper-slide{
    position: absolute;
    left: 50%;top:0;
    width: 40%;height:100%;
    margin-left: -20%;
    font-size: 40px;
    transition: all .4s linear;
    -webkit-transition: all .4s linear;
    cursor: pointer;
    /*下面设置文字居中，可以去掉*/

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*====没用代码，可以去掉====*/
/*.swiper-wrapper div:nth-of-type(1){background-color: #B41B1B;}*/
/*.swiper-wrapper div:nth-of-type(2){background-color: #C9CA2D;}*/
/*.swiper-wrapper div:nth-of-type(3){background-color: #92CA2D;}*/
/*.swiper-wrapper div:nth-of-type(4){background-color: #30CA2D;}*/
/*.swiper-wrapper div:nth-of-type(5){background-color: #2DCAA7;}*/
/*.swiper-wrapper div:nth-of-type(6){background-color: #2DA7CA;}*/
/*.swiper-wrapper div:nth-of-type(7){background-color: #2D4FCA;}*/
/*.swiper-wrapper div:nth-of-type(8){background-color: #732DCA;}*/
/*.swiper-wrapper div:nth-of-type(9){background-color: #B92DCA;}*/
/*.swiper-wrapper div:nth-of-type(10){background-color: #CA2D73;}*/
/*====没用代码，可以去掉====*/


.swiper3D-leftbtn,
.swiper3D-rightbtn{
    position: absolute;
    top: 50%;
    margin-top: -40px;
    width: 40px;height: 80px;
    background-color: #25A27C;
    font-size: 30px;
    font-weight: bold;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
}
.swiper3D-leftbtn{left: 20px;}
.swiper3D-rightbtn{right: 20px;}

/*导航*/

.navbox{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.navbox span{
    display: inline-block;
    width: 30px;height: 30px;
    margin: 5px;
    border-radius: 100%;
    background-color: #00C81B;
    opacity: .7;
    cursor: pointer;
}
.navbox span.active{
    opacity: 1;
}
/*
 *在这里 调整每一个的位置
 */

/*从左往右 第一个*/
.swiper3D .left{
    opacity: .5;
    transform: translateX(-30%) scale3d(.6,.6,.6) ;
    -webkit-transform: translateX(-30%) scale3d(.6,.6,.6) ;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: 1;
}
/*从左往右 第二个*/
.swiper3D .left-harf{
    /*opacity: .8;*/
    transform: translateX(-50%) scale3d(.4,.4,.4) ;
    -webkit-transform: translateX(-50%) scale3d(.4,.4,.4) ;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: 5;
}
/*从左往右 第三个*/
.swiper3D .front{
    opacity: 1;
    transform: translateX(0) scale3d(1,1,1) ;
    -webkit-transform: translateX(0) scale3d(1,1,1) ;
    z-index: 10;
}
/*从左往右 第四个*/
.swiper3D .right-harf{
    /*opacity: .8;*/
    transform: translateX(50%) scale3d(.4,.4,.4) ;
    -webkit-transform: translateX(50%) scale3d(.4,.4,.4) ;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    z-index: 5;
}
/*从左往右 第五个*/
.swiper3D .right{
    opacity: .5;
    transform: translateX(30%) scale3d(.6,.6,.6) ;
    -webkit-transform: translateX(30%) scale3d(.6,.6,.6) ;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    z-index: 1;
}
/*5个能看到的以外的 slide 放在最后面*/
.swiper3D .back{
    opacity: 0;
    transform: translateX(0) scale3d(.5,.5,.5) ;
    -webkit-transform: translateX(0) scale3d(.5,.5,.5) ;
    z-index: 1;
}