无法围绕中心 css 旋转图像

Question

所以我想使用 css 将图标旋转到位。

我试过了

.rotate-icon-gif {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { 
        -ms-transform: rotate(0deg); 
    }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg);
            -webkit-transform-origin: 30px 22px;

     }
    to { -webkit-transform: rotate(360deg); 
            -webkit-transform-origin: 30px 22px;

    }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
        transform-origin: 55% 50%;
    }
    to {
        transform:rotate(360deg);
        transform-origin: 55% 50%;
    }
}

但它不会原地旋转 - 它围绕其他中心旋转。

我查看了具有这个的 div 的尺寸 -

它是 60 x 30，顶部有 15 个填充。因此，我尝试在 30px 和 22px 偏移上制作变换原点。

它仍然无法正常工作 - 我应该如何解决这个问题？

Answer 1

有两种方法可以实现这一点。首先，您可以编辑图像，使中心直接位于旋转轴上。

第一种方法

使用裁剪的图像。 （未添加 CSS，删除过时的transition-origin）

参见sn-p：

.rotate-icon-gif {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { 
        -ms-transform: rotate(0deg); 
    }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg);

     }
    to { -webkit-transform: rotate(360deg); 

    }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

<img src="http://i.imgur.com/tPLLoew.png" class="rotate-icon-gif">

第二种方法

您可以使用transform-origin: x y; 在这里，您需要使用 Paint 或 Photoshop 找到轴的 x 和 y 坐标，如下所示：（您需要找到黑线交点坐标）

见 sn-p :

.rotate-icon-gif {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
    transform-origin: 42px 35px;
  }
  to {
    -ms-transform: rotate(360deg);
    transform-origin: 42px 35px;
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 42px 35px;
  }
  to {
    -moz-transform: rotate(360deg);
    -moz-transform-origin: 42px 35px;
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 42px 35px;
  }
  to {
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: 42px 35px;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
    transform-origin: 42px 35px;
  }
  to {
    transform: rotate(360deg);
    transform-origin: 42px 35px;
  }
}

<img src="http://i.stack.imgur.com/GZ2CV.png" class="rotate-icon-gif">

注意 - 来自我的其他回答：link