旋转图像无法正常工作

Question

我的例子/工作：http://thomasdebelder.be/1/ 我正在尝试像这样旋转月球，行星：https://www.google.com/doodles/new-horizons-pluto-flyby 但它不起作用，我尝试在我的 css 代码中进行转换：以 180 度和 360 度旋转它，围绕 X 旋转它，使用 transform-origin:center但它仍然旋转得很厉害。它需要围绕中心旋转，就像在谷歌链接中而不是从左到右一样。

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

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

Answer 1

你需要添加一个 transform-origin: 50% 50% 来绕着中心转

Answer 2

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