css - rotating image not working properly -


my example/work: http://thomasdebelder.be/1/ i'm trying rotate moon, planet this: https://www.google.com/doodles/new-horizons-pluto-flyby doesnt work, tryed in css code transform:rotate 180 , 360 deg, rotating around x, transform-origin:center still rotates badly. needs rotate around center, in google link not left right.

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

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

you need add transform-origin: 50% 50% make turn around center


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -