3D效果轮播图

3D效果轮播图

代码

      Document      * {      margin: 0;      padding: 0;      box-sizing: border-box;    }    body {      perspective: 800px;      transform-style: preserve-3d;    }    .box {      display: flex;      width: 250px;      height: 250px;      margin: 150px auto;      /*   overflow: hidden; 溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突，会导致不同图片3D效果切换无法实现*/      position: relative;      transform-style: preserve-3d;      transition: all 0.5s;    }    img {      display: block;      width: 250px;      height: 250px;      position: absolute;      top: 0;      left: 0;      /* position: absolute; */    }    @keyframes ro {      0% {        transform: rotateX(90deg);      }      10% {        transform: rotateY(90deg);      }      20% {        transform: rotateY(90deg);      }      30% {        transform: rotateZ(90deg);      }      40% {        transform: rotateZ(90deg);      }      50% {        transform: rotateY(90deg);      }      60% {        transform: rotateX(90deg);      }      70% {        transform: rotateX(180deg);      }      80% {        transform: rotateZ(-90deg);      }      90% {        transform: rotateY(-90deg);      }      100% {        transform: rotateY(90deg);      }    }    @keyframes fd {      50% {        transform: scale3d(1.5, 1.5, 1.5)      }      100% {        transform: scale3d(1, 1, 1);      }    }    .box .front {      transform: translateZ(125px);    }    .box .back {      transform: translateZ(-125px) rotateX(180deg);    }    .box .up {      transform: translateY(-125px) rotateX(90deg);    }    .box .down {      transform: translateY(125px) rotateX(-90deg);    }    .box .left {      transform: translateX(-125px) rotateY(-90deg);    }    .box .right {      transform: translate(125px) rotateY(90deg);    }    /*  .box .back {      transform: translateZ(1250px) rotateX(180deg);    } */        .box {      animation: ro 9s linear infinite alternate forwards/* , fd 9s 0.2s linear backwards */;    }        .box:hover {      animation-play-state: paused;    }        
效果图