css 动画 线圈运动

css 动画 线圈运动

实现线绕这某个物体图片运动

先做一张图

图片就是有渐变效果的线圈，只要控制在一定角度旋转就行
html

 <div class="base">
        <div class="pan"></div>
      </div>

css

.base{
      transform-style: preserve-3d !important;
      -webkit-transform: rotateX(80deg) rotateY(-20deg);
      transform: rotateX(80deg) rotateY(-20deg);
      position: relative;
   	  top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    
      }
  .pan{
   position: absolute;
   width: 100%;
   height: 100%;
   background-image: url("../../assets/image/c.png");
   background-size: 100% 100%;
   -webkit-animation: cir_p 5s linear 0s infinite;
   animation: cir_p 5s linear 0s infinite;
   transform-origin:50% 50%;
 }
 @keyframes cir_p {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(-360deg);
    }
  }