变换：旋转不工作 - 但在原始样机上工作

Question

我制作了一个我们用于销售的Fidget微调框动画。

你可以看到它完美地在这里工作：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/