8张图片围绕中心点旋转

html代码

<div v-show="showAnimate==1" id="a02" class="responsibility-container clearfix" style="background-size: 100% 80%;background-position-y:100px;">         <div class="responsibility section" v-show="bannerLists.length>0">           <div class="caursel3d-container section" style="height: 600px;">             <div class="caursel3d disno wow fadeInUp" style="display: block;">               <div id="carousel" style="animation-name: rotation5; animation-play-state: running;">                 <figure id="res-tabImg8" v-for="(item,index) in bannerLists" :key="index"><img :src="item.pic"><p>{     
      {item.picName}}</p></figure>               </div>             </div>             <div class="showSelectImg-container"> <img onclick="handleToDetail(this)" class="showSelectImg" src=""> </div>           </div>         </div>         <div v-show="bannerLists.length==0" style="font-size: 52px;text-align: center;line-height: 689px;">暂无数据</div>       </div> 

引入当前组件css 以下是css样式

 @keyframes rotation {   from {     transform: rotateY(0deg); }    to {     transform: rotateY(-360deg); } }  @keyframes rotation1 {   from {     transform: rotateY(0deg); }    to {     transform: rotateY(-360deg); } }  @keyframes rotation2 {   from {     transform: rotateY(-45deg); }    to {     transform: rotateY(-405deg); } }  @keyframes rotation3 {   from {     transform: rotateY(-90deg); }    to {     transform: rotateY(-450deg); } }  @keyframes rotation4 {   from {     transform: rotateY(-135deg); }    to {     transform: rotateY(-495deg); } }  @keyframes rotation5 {   from {     transform: rotateY(-180deg); }    to {     transform: rotateY(-540deg); } }  @keyframes rotation6 {   from {     transform: rotateY(-225deg); }    to {     transform: rotateY(-585deg); } }  @keyframes rotation7 {   from {     transform: rotateY(-270deg); }    to {     transform: rotateY(-630deg); } }  @keyframes rotation8 {   from {     transform: rotateY(-315deg); }    to {     transform: rotateY(-675deg); } } /* 动画旋转结束 */      @media (min-width: 1200px) {   .caursel3d {         width: 460px;         height: 312px;         top: 155px;         perspective: 2100px;     }      #carousel figure {         width: 460px;         height: 312px;     }      #carousel figure:nth-child(1) {         transform: rotateY(0deg) translateZ(600px);     }      #carousel figure:nth-child(2) {         transform: rotateY(45deg) translateZ(600px);     }      #carousel figure:nth-child(3) {         transform: rotateY(90deg) translateZ(600px);     }      #carousel figure:nth-child(4) {         transform: rotateY(135deg) translateZ(600px);     }      #carousel figure:nth-child(5) {         transform: rotateY(180deg) translateZ(600px);     }      #carousel figure:nth-child(6) {         transform: rotateY(225deg) translateZ(600px);     }      #carousel figure:nth-child(7) {         transform: rotateY(270deg) translateZ(600px);     }      #carousel figure:nth-child(8) {         transform: rotateY(315deg) translateZ(600px);     }      .caursel3d-container {         position: relative;     }        }     /* @keyframes textmove {   0% {     transform: translateX(-8px); }    25% {     transform: translateX(0px); }    50% {     transform: translateX(8px); }    100% {     transform: translateY(0px); } } */    /* .responsibility-container {   position: relative;   padding: 40px 0;   width: 100%;   background-position: center;   background-size: 100% 85%;   background-repeat: no-repeat; background-color: #201E19; } */  /* .responsibility {   position: relative; } */    /* .caursel3d-container {     position: relative; } */   /* .showSelectImg-container {   display: none;   position: relative;   width: 100%;   height: 100%;   overflow: hidden; }  .showSelectImg {   display: block;   width: 600px;   height: 100%;   margin: 0 auto; } */   .caursel3d {   display: block;   position: relative;   margin: auto; }  #carousel {   position: absolute;   width: 100%;   height: 100%;   margin: auto;   transform-style: preserve-3d;   animation-duration: 30s;   animation-timing-function: linear;   animation-iteration-count: infinite;   animation-name: rotation; }  #carousel:hover {     animation-play-state: paused; }  #carousel figure {     display: block;     position: absolute;     left: 0px;     top: 10px;  } #carousel figure p{         color: #D5BFA1; font-weiht: 700; text-align: center; padding-top: 15px;
        font-size: 24px;
    }


.caursel3d img{
  cursor: pointer;
  transition: all .5s ease;
  
  width: 100%;
  height: 100%; }

.caursel3d img:hover{
  transform: scale(1.4, 1.4); 
  /* transform: scale(1.2, 1.2);  */
}

js实现可参考这个链接：https://blog.csdn.net/theArcticOcean/article/details/69437535?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-0-69437535-blog-124887725.pc_relevant_eslanding_v2&spm=1001.2101.3001.4242.1&utm_relevant_index=3