在另一个img中变换圆img的旋转和平移

Question

我正在尝试通过外部光线缓慢旋转来为太阳设置动画。我有两个图像：sun_inner 和 sun_outer。我使用绝对定位和 transform:translate 将容器内的内部太阳居中。但是，当我尝试将内太阳（有一个笑脸）旋转几度时，它并没有沿着中心轴旋转，而是内太阳上下移动。

感谢任何帮助使内部太阳的旋转在容器内居中！

举个例子，这里有一个小提琴：https://jsfiddle.net/4mcdLcus/

.sun-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
  In the animation I apply translateY(-50%) translateX(-50%) 
  to keep the inner circle centered, which is not working. 
  If I have translateY(-50%) translateX(-50%) without the rotation 
  it is centered properly
  */
  animation-name: sun_inner_rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
.sun-inner img {
  height: 150px;
  width: 150px;
}
.sun-outer {
  animation-name: sun_outer_rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  width: 300px;
  height: 300px;
}
.sun-outer img {
  width: 300px;
  height: 300px;
}
@keyframes sunrise {
  0% {
    bottom: -130vh;
  }
  100% {
    bottom: 0;
  }
}
@keyframes sun_inner_rotate {
  0% {
    transform: rotate(0deg) translateY(-50%) translateX(-50%);
    ;
  }
  33% {
    transform: rotate(12deg) translateY(-50%) translateX(-50%);
  }
  66% {
    transform: rotate(-26deg) translateY(-50%) translateX(-50%);
  }
  100% {
    transform: rotate(10deg) translateY(-50%) translateX(-50%);
  }
}
@keyframes sun_outer_rotate {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(360deg);
  }
  66% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.sunContainer {
  width: 300px;
  height: 300px;
  position: relative;
  margin-left: 10%;
  margin-top: 7%;
  animation-iteration-count: 1;
  animation-name: sunrise;
  animation-duration: 1.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="sunContainer">
  <div class="sun-inner">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
  <div class="sun-outer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
</div>

Answer 1

不，您不需要使用两个动画或对已配置的@keyframes 执行任何其他操作。只需为内部元素正确设置transform-origin。

内部元素最初位于父元素的top: 50% 和left: 50%（也就是说，内部元素的左上角在父元素的中心点）。然后使用transform: translateX(-50%) translateY(-50%) 技巧将其垂直和水平居中。

因此，当您旋转元素时，应将transform-origin 设置为left top，以使元素围绕父元素的中心点旋转。只有这样它才能完全居中。

.sun-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  animation-name: sun_inner_rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transform-origin: left top;  /* note the change */
}
.sun-inner img, .sun-outer img {
  height: 100%;
  width: 100%;
}
.sun-outer {
  animation-name: sun_outer_rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  width: 300px;
  height: 300px;
}
@keyframes sunrise {
  0% {
    bottom: -130vh;
  }
  100% {
    bottom: 0;
  }
}
@keyframes sun_inner_rotate {
  0% {
    transform: rotate(0deg) translateY(-50%) translateX(-50%);
  }
  33% {
    transform: rotate(12deg) translateY(-50%) translateX(-50%);
  }
  66% {
    transform: rotate(-26deg) translateY(-50%) translateX(-50%);
  }
  100% {
    transform: rotate(10deg) translateY(-50%) translateX(-50%);
  }
}
@keyframes sun_outer_rotate {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(360deg);
  }
  66% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.sunContainer {
  width: 300px;
  height: 300px;
  position: relative;
  margin-left: 10%;
  margin-top: 7%;
  animation-iteration-count: 1;
  animation-name: sunrise;
  animation-duration: 1.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="sunContainer">
  <div class="sun-inner">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
  <div class="sun-outer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
</div>

或者，您可以反转在元素上应用变换的顺序。您可以先在元素上应用rotate，然后在旋转的元素上应用translateX 和translateY。这也将使其完全居中。 （指定多个变换时，总是先执行右边第一个，最后执行右边最后一个）。

.sun-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 150px;
  animation-name: sun_inner_rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
.sun-inner img, .sun-outer img {
  height: 100%;
  width: 100%;
}
.sun-outer {
  animation-name: sun_outer_rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  width: 300px;
  height: 300px;
}
@keyframes sunrise {
  0% {
    bottom: -130vh;
  }
  100% {
    bottom: 0;
  }
}
@keyframes sun_inner_rotate { /* note the change to the order */
  0% {
    transform: translateY(-50%) translateX(-50%) rotate(0deg);
  }
  33% {
    transform: translateY(-50%) translateX(-50%) rotate(12deg);
  }
  66% {
    transform: translateY(-50%) translateX(-50%) rotate(-26deg);
  }
  100% {
    transform: translateY(-50%) translateX(-50%) rotate(10deg);
  }
}
@keyframes sun_outer_rotate {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(360deg);
  }
  66% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.sunContainer {
  width: 300px;
  height: 300px;
  position: relative;
  margin-left: 10%;
  margin-top: 7%;
  animation-iteration-count: 1;
  animation-name: sunrise;
  animation-duration: 1.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="sunContainer">
  <div class="sun-inner">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
  <div class="sun-outer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Compass_360_%28en%29.svg">
  </div>
</div>