css - 旋转图像无法正常工作

标签 css animation

我的示例/作品:http://thomasdebelder.be/1/ 我正在尝试像这样旋转月球、行星:https://www.google.com/doodles/new-horizons-pluto-flyby但它不起作用,我尝试在我的 css 代码中进行转换:用 180 度和 360 度旋转它,用 transform-origin:center 围绕 X 旋转它,但它仍然旋转得很糟糕。它需要围绕中心旋转,就像在 google 链接中不是从左到右。

@keyframes 月亮 { 100% { 变换:旋转(180度); }}

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

最佳答案

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

关于css - 旋转图像无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43255370/

相关文章:

css - 移动屏幕尺寸的复选框(输入)高度和宽度发生变化?

javascript - jquery触发第二次点击问题

javascript - blast.js 动画与 jquery ui 彩色动画

动画时 z-index on::before 的 CSS 问题

html - "Background-size: "不影响背景图像 HTML CSS Flask

javascript - 隐藏元素后滑动 float 的 div

html - CSS:帮助对齐彼此相邻的 div(展开 - 折叠)框

android - 使用 Android 动画,情绪从中心向右滚动

javascript - event.preventDefault();导航,同时仍然允许使用后退和前进按钮

CSS 关键帧动画在本地工作,但不在我的网站上