Question

我试图用外部光线缓慢旋转来制作太阳的动画。我有两个图像：sun_inner和sun_outer。我使用绝对定位和变换：平移内部太阳在容器内居中。但是，当我试图将内太阳（有一个笑脸）旋转几度时，它不会沿着中心轴旋转，而内太阳正在上下移动。

任何有助于让内太阳的旋转在容器中居中的任何帮助都是值得赞赏的！

这里的例子是一个小提琴：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

1 个答案: