Question

我正在尝试为一个圆圈创建一个CSS动画来围绕一个圆圈旋转而没有太大的成功。我搜索了或多或少看到了如何实现这一目标，我来到了这里：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  html，body {＆＃xD;＆＃xA;高度：100％;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #wrapper {＆＃xD;＆＃xA; align-items：center;＆＃xD;＆＃xA; display：flex;＆＃xD;＆＃xA;身高：400px;＆＃xD;＆＃xA; justify-content：center;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #loading {＆＃xD;＆＃xA;身高：400px;＆＃xD;＆＃xA;位置：相对;＆＃xD;＆＃xA;宽度：400px;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; img {＆＃xD;＆＃xA;位置：绝对;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .ring {＆＃xD;＆＃xA;动画：环形线性2s无限;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; @keyframes响{＆＃xD;＆＃xA;＆＃xD;＆＃xA; 100％{＆＃xD;＆＃xA; transform：rotate3d（1,1,1，-360deg）rotate（-360deg）rotateY（360deg）;＆＃xD;＆＃xA; }＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 ＆lt; div ID = “包装” ＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div id =“loading”＆gt;＆＃xD;＆＃xA; ＆lt; img src =“http://i.imgur.com/cW9hEgY.gif”class =“ring”/＆gt;＆＃xD;＆＃xA; ＆lt; img src =“http://i.imgur.com/dfZJ7FW.gif”class =“sphere”/＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

 ＆＃xD;＆＃xA; 
＆＃xA;＆＃xA; 戒指旋转，但它太随机了，即使是我想到的最终效果（也会非常随机） ， 在某方面）。我测试了很多组合，我开始认为它可能是 rotate3d（）的错误，甚至更多，因为我无法理解它在MDN上的大量文档。
＆＃xA ;＆＃xA; 我认为，由于戒指会沿着对角线旋转，我可以将其旋转到动画外部，同时还有 animation 声明，然后只能在Y轴上旋转但是结果更糟：
＆＃xA;＆＃xA;  
＆＃xD;＆＃xA; ＆＃xD;＆＃xA;   html，body {＆＃xD;＆＃xA;高度：100％;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #wrapper {＆＃xD;＆＃xA; align-items：center;＆＃xD;＆＃xA; display：flex;＆＃xD;＆＃xA;身高：400px;＆＃xD;＆＃xA; justify-content：center;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #loading {＆＃xD;＆＃xA;身高：400px;＆＃xD;＆＃xA;位置：相对;＆＃xD;＆＃xA;宽度：400px;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; img {＆＃xD;＆＃xA;位置：绝对;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .ring {＆＃xD;＆＃xA;动画：环形线性2s无限;＆＃xD;＆＃xA; transform：rotate（120deg）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; @keyframes响{＆＃xD;＆＃xA;＆＃xD;＆＃xA; 100％{＆＃xD;＆＃xA; transform：rotateY（-120deg）;＆＃xD;＆＃xA; }＆＃xD;＆＃xA;}  
＆＃xD;＆＃xA;  ＆lt; div ID = “包装” ＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div id =“loading”＆gt;＆＃xD;＆＃xA; ＆lt; img src =“http://i.imgur.com/cW9hEgY.gif”class =“ring”/＆gt;＆＃xD;＆＃xA; ＆lt; img src =“http://i.imgur.com/dfZJ7FW.gif”class =“sphere”/＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;  
＆＃的xD;＆＃XA; 
＆＃的xD;＆＃XA; 
 ＆＃xD;＆＃xA; 
＆＃xA;＆＃xA; 另外，正如您所看到的那样，它在完成围绕小球体的完全旋转之前停止。而且我不想加速动画以使其变得不那么引人注目，我想真正解决它。
＆＃xA;＆＃xA; 我是如何实现的？＆ #xA;

Answer 1

请注意，在第二个代码段中，您的动画效果为rotate(120deg)至rotateY(120deg)。 rotate()在Z轴上旋转元素，这可能会让你感到困惑。

如果您的目标只是旋转Y轴上的元素，则应删除.ring元素上的变换decalration，如下所示：

html, body {
  height: 100%;
}

#wrapper {
  align-items: center;
  display: flex;
  height: 400px;
  justify-content: center;
}

#loading {
  height: 400px;
  position: relative;
  width: 400px;
}

img {
  position: absolute;
}

.ring {
  animation: ring linear 6s infinite;
  transform:rotateY(0deg) rotateZ(120deg);
}

 @keyframes ring {
   to {  transform:rotateY(360deg) rotateZ(120deg); }
}

<div id="wrapper">

  <div id="loading">
    <img src="http://i.imgur.com/cW9hEgY.gif" class="ring" />
    <img src="http://i.imgur.com/dfZJ7FW.gif" class="sphere" />
  </div>
</div>

请注意，我还将动画旋转6秒到360度，因此第一帧与最后一帧相同，并且动画结束时没有捕捉。

Answer 2

html, body {
  height: 100%;
}

#wrapper {
  align-items: center;
  display: flex;
  height: 400px;
  justify-content: center;
}

#loading {
  height: 400px;
  position: relative;
  width: 400px;
}

img {
  position: absolute;
}

.ring {
  animation: ring linear 2s infinite;
}

 @keyframes ring {

   100% {
     transform: rotateY( -360deg );
   }
}

<div id="wrapper">
    <div id="loading">
        <img src="http://i.imgur.com/cW9hEgY.gif" class="ring" />
        <img src="http://i.imgur.com/dfZJ7FW.gif" class="sphere" />
    </div>
</div>

transform: rotate( 120deg );使y轴不垂直。你还应该有360deg轮换来完成一个整圈。

动画环围绕圆圈旋转它

2 个答案: