Rotate image around center css3

css rotation center
anthonytherockjohnson picture anthonytherockjohnson · Apr 7, 2014 · Viewed 67.2k times · Source

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:

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

Answer

Fabrizio Calderan picture Fabrizio Calderan · Apr 7, 2014

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/

Related questions

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still. .image { float: left; …

Read More
CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', …

Read More
CSS3 transition on click using pure CSS

I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate …

Read More