css旋转不围绕圆心,无法围绕中心css旋转图像

所以我想用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偏移上进行变换原点。

它还没有工作 - 我该如何解决这个问题？