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

Question

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

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

这里的例子是 fiddle: 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>

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

Transform rotate and translate of circle img inside another img

css

css-transforms

css-animations