7.绝对定位加动画后失效问题

  .dish-box{
      width: 280px;
      height: 280px;
      border-radius: 140px;
      background-color: #000;
      position: relative;
      img{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        position: absolute;
        display: table;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        animation:discRotate 10s linear  infinite;
      }
   }
解决方案 : animation重新定义transform
    @keyframes discRotate {
       from{
         transform: translate(-50%, -50%) rotate(0deg)
       }to{
         transform: translate(-50%, -50%) rotate(360deg)
       }
    }