Rotate image around center css3

Question

I'm trying to spin a world around its center - but cant seem to rotate it the correct way (around its own center axis)

Its hard to explain so I made a demo:

.world {
  -webkit-animation: spin1 2s infinite linear;
  -moz-animation: spin1 2s infinite linear;
  -o-animation: spin1 2s infinite linear;
  -ms-animation: spin1 2s infinite linear;
  animation: spin1 2s infinite linear;
}

@-webkit-keyframes spin1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes spin1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes spin1 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}

@-keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div>

Thanks for the help (working help will be credited in the final experiment)

Don't you have to set the origin to the center of your image using: `transform-origin` — Cyclonecode, Apr 07 '14 at 09:20
Thanks for the replies but after a little fiddling - all i had to do was specify the image class as .world and everything ran fine - to clarify - i was spinning the div instead of the image and the div's origin i presume is bottom right corner. — anthonytherockjohnson, Apr 07 '14 at 09:26

Fabrizio Calderan · Answer 1 · 2014-04-07T09:28:30.777

33

you need to set the size of the element and specify the transform-origin property

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: 256px;
height: 256px;

Example fiddle : http://jsfiddle.net/RbXRM/3/

edited Apr 07 '14 at 09:28

answered Apr 07 '14 at 09:22

Fabrizio Calderan

120,726
26
164
177

4

in fact the `transform-origin` is centered by default http://jsfiddle.net/RbXRM/2/ – King King Apr 07 '14 at 09:26
1

@KingKing Nice, I thought the default value was `0, 0, 0`. Is it the default value for every browser? – Fabrizio Calderan Apr 07 '14 at 09:29
1

I'm not sure but it should be so because that's what written in CSS3 specification http://www.w3schools.com/cssref/css3_pr_transform-origin.asp :) – King King Apr 07 '14 at 09:31

score 20 · Accepted Answer · edited Aug 29 '19 at 21:26

You are not restricting the size of the div.

In fact you don't need the div at all, you can just apply the class to the image:

.world
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
    display: block;
}
 
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

<img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/>

Thats it - i figured it out as you answered - thank you anyways. Paulie_D will credit — anthonytherockjohnson, Apr 07 '14 at 09:28

score 2 · Answer 3 · answered Apr 07 '14 at 09:30

you need to spin only the img

.world img
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}

or modify display of div.world so it it shrinks on image (inline-block,inline-table,table) or even float it

Rotate image around center css3

3 Answers3

Linked