旋转图像不能正常工作

Question

我的示例/工作：http://thomasdebelder.be/1/ 我试图像这样旋转月亮，行星：https://www.google.com/doodles/new-horizons-pluto-flyby但它不起作用，我尝试用我的css代码进行变换：用180度和360度旋转它，围绕X旋转，用变换-origin：中心，但它仍然旋转严重。它需要围绕中心旋转，就像谷歌链接一样，不是从左到右。

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

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

Answer 1

你需要添加一个变换原点：50％50％来围绕中心进行转换

Answer 2

在图像中添加transform-origin: center center;。