CODEWITHSUNDEEP
htmlcss
praks5432
praks5432

Reputation: 7792

Cannot rotate image about center css

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.

enter image description here enter image description here

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?

Upvotes: 0

Views: 1041

Answers (1)

The Pragmatick
The Pragmatick

Reputation: 5477

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)

enter image description here

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="https://i.sstatic.net/GZ2CV.png" class="rotate-icon-gif">

NOTE - From my other answer : link

Upvotes: 2

Related Questions