Question

我正试图制作一个围绕太阳旋转的行星的动画。但它不能正常工作。我无法弄清楚我做错了什么。如果有人能给我一些启发，我将非常感激。谢谢。这是CSS代码：

.sun {
  position: absolute;
  top: 300px;
  left: 300px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: indigo;
}

.divDePruebas {
  width: 100px;
  height: 100px;
  box-shadow: inset 36px 0 40px 3px rgba(0, 0, 0, 0.9), inset -10px 0 5px 2px rgba(255, 255, 255, 0.16);
  background-image: url(lava.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.8;
  animation: orbit 15s linear infinite;
  border-radius: 50%;
  position: absolute;
  top: 310px;
  left: 310px;
  transform: translate(-50%, -50%);
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px);
  }
  to {
    transform: rotate(360deg) translateX(150px);
  }
}

<div class="sun"></div>
<div class="planet"></div>

提前致谢。

Answer 1

您需要使用属性transform-origin

transform-origin: 0 0;

和btw在你的问题中你在html的css和planet中使用了divDePruebas类

Answer 2

这可以通过多种方式解决，但在这种情况下，它基于您在transform: translate(-50%, -50%)规则中使用.planet的事实，然后在添加动画时更改了非常相同的属性，它会覆盖现有值。

如果你也在关键帧中添加它，就像这样，

transform: translate(-50%, -50%) rotate(0deg) translateX(150px);，

它将按预期工作

此外，transform从右到左执行转换值，因此首先执行translateX(150px)，依此类推，因此您需要translate(-50%, -50%)作为左侧最重要的是

Stack snippet

＆＃13;

.sun {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: indigo;
}

.planet {
  width: 100px;
  height: 100px;
  box-shadow: inset 36px 0 40px 3px rgba(0, 0, 0, 0.9), inset -10px 0 5px 2px rgba(255, 255, 255, 0.16);
  background-image: url(lava.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.8;
  animation: orbit 15s linear infinite;
  border-radius: 50%;
  position: absolute;
  top: 210px;
  left: 210px;
  transform: translate(-50%, -50%);
}

@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(150px);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(150px);
  }
}

＆＃13;

<div class="sun"></div>
<div class="planet"></div>

＆＃13;

在循环路径中运行，纯CSS3不起作用

2 个答案: