CODEWITHSUNDEEP
cssanimation
Distortion
Distortion

Reputation: 311

rotating image not working properly

My example/work: http://thomasdebelder.be/1/ I'm trying to rotate a moon, planet like this: https://www.google.com/doodles/new-horizons-pluto-flyby but it doesnt work, I tryed in my css code to transform:rotate it with 180 and 360 deg, rotating it around the X, with transform-origin:center but it still rotates badly. It needs rotate around the center, like in the google link not from left to right.

@keyframes moon { 100% { transform:rotate(180deg); }}

      <!-- MOON -->
        <div class="moon">
        <img src="images/moon.png">
        </div>

Upvotes: 1

Views: 339

Answers (2)

Sahil Dawka
Sahil Dawka

Reputation: 11

Add transform-origin: center center; to the image.

Upvotes: 0

Sunkhern
Sunkhern

Reputation: 278

You need to add a transform-origin: 50% 50% to make this turn around the center

Upvotes: 1

Related Questions