變換：旋轉不工作 - 但在原始樣機上工作

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/