.home-wrap { position:relative; height:300px; } .home-banner { position:absolute; width:500px; height:300px; overflow:hidden; perspective:300px; } @media only screen and (max-width:640px ) { .home-wrap { height:310px; } .home-banner { width:100%; height:300px; margin-left:0; } }.img-box { position:absolute; left:0; width:calc(100%*3); height:100%; transform-style:preserve-3d; transform:translateX(0); } .home-banner-img { position:absolute; width:calc(100%/3); height:100%; box-shadow:4px 5px 9px #333333; cursor:pointer; } .banner-img-two { transform:translateX(100%); } .banner-img-three { transform:translateX(200%); } @keyframes xz1-2 { 0% { transform:rotateY(0) translateX(0) } 50% { transform:rotateY(-10deg) translateX(calc(-100%/6)) } 100% { transform:rotateY(0) translateX(calc(-100%/3)) } }@keyframes xz2-3 { 0% { transform:rotateY(0) translateX(calc(-100%/3)) } 50% { transform:rotateY(-10deg) translateX(calc(-100%/2)) } 100% { transform:rotateY(0) translateX(calc(-100%/3*2)) } }@keyframes xz3-2 { 0% { transform:rotateY(0) translateX(calc(-100%/3*2)) } 50% { transform:rotateY(10deg) translateX(calc(-100%/2)) } 100% { transform:rotateY(0) translateX(calc(-100%/3)) } }@keyframes xz2-1 { 0% { transform:rotateY(0) translateX(calc(-100%/3)) } 50% { transform:rotateY(10deg) translateX(calc(-100%/6)) } 100% { transform:rotateY(0) translateX(0) } }@keyframes xz1-3 { 0% { transform:rotateY(0) translateX(0) } 50% { transform:rotateY(-12deg) translateX(calc(-100%/3)) } 100% { transform:rotateY(0) translateX(calc(-100%/3*2)) } }@keyframes xz3-1 { 0% { transform:rotateY(0) translateX(calc(-100%/3*2)) } 50% { transform:rotateY(12deg) translateX(calc(-100%/3)) } 100% { transform:rotateY(0) translateX(0) } }.home-banner-index { display:inline-block; position:absolute; width:16px; height:16px; bottom:20px; left:50%; margin-left:-8px; box-sizing:border-box; border:3px #454545 solid; background:#454545; border-radius:50%; transition:all 1s linear; z-index:20; cursor:pointer; } .home-banner-index:nth-child(1) { margin-left:-28px; } .home-banner-index:nth-child(3) { margin-left:12px; } .home-banner-now { background:#ffffff; }