变换：旋转不起作用 - 但适用于原始模型

Question

我制作了一个指尖陀螺动画，用于促销。

您可以在这里看到它完美运行：https://jsfiddle.net/e2tt2mao/448/

但是，当我将相同/相似的代码应用到我目前正在制作的“场景”时，我根本无法让它旋转......

请看这里：https://jsfiddle.net/uzfpqysc/8/

我已经尝试了一切.. 我不确定为什么它不会在我的“第二个 js 小提琴链接”中旋转

非常感谢任何帮助！

    @-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

Answer 1

问题在于 .rotating 跨度没有宽度和高度，因为里面的图像是绝对定位的。我已经为跨度定义了一个宽度和高度，并让它的变换原点为transform-origin: 50% 50%;。我还尝试将.rotating 跨度居中定位，但您可能需要调整它。

https://jsfiddle.net/WizardCoder/uzfpqysc/11/

编辑：这是响应版本。我不得不稍微调整.animateVSS 的样式，以使我能够正确地居中微调器。它将与您的样式所做的相同，只是方法略有不同。

https://jsfiddle.net/WizardCoder/uzfpqysc/12/