8张图片围绕中心点旋转

html代码

         
           
             
               
                 
{     
      {item.picName}}
               
             
             
  
           
         
         
暂无数据
       
 

引入当前组件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