Cannot rotate image about center css - html

Question

So I want to rotate an icon in place using css.
I've tried this
.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%;
}
}
But it won't rotate in place - it rotates about some other center.
I've looked at the dimensions of the div that has this -
It's 60 x 30, with 15 padding on top. Hence, I've tried to make the transform-origin on 30px and 22px offsets.
It's still not working - how should I go about fixing this?

Answer 1

There are two methods of achieving this. Firstly, you can edit the image so the center lies directly on the axis of rotation.
First Method
Using cropped image. (No CSS added, deleted obsolete transition-origin)
See snippet:
.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">
Second Method
You can use transform-origin: x y; Here, you need to find the x and y coordinates of the axis using Paint or Photoshop like this: (You need to find the coordinates of intersection of black line)
See snippet :
.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">
NOTE - From my other answer : link