動畫 - 意外位置更改

我的代碼有問題。我想做一個div旋轉，但是當div旋轉時，位置與以前不同。動畫 - 意外位置更改

.rotateWindow { 
    position: absolute; 
    text-align: center; 
    margin: 0 auto; 
    width: 150px; 
    height: 150px; 
    left:50%; 
    top:50%; 
    transform: translate(-50%, -50%); 
    line-height: 32px; 
    border: solid 7px; 
    border-top: #f8f8ff; 
    border-radius: 50%; 
    font-family: 'Lobster', cursive; 
    color: #f8f8ff; 
    font-size: 18px; 
    z-index: -1; 
     -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-duration: 6s; 

} 

@-webkit-keyframes spin { 
from { 
    -webkit-transform: rotate(0deg); 
} 
to { 
    -webkit-transform: rotate(360deg); 
    } 
} 
}

沒有動畫，它是在頁面的中心，我添加動畫後，它在其主要位置。另外我嘗試了一個簡單的jQuery代碼，仍然是一樣的。

$(function() { 
    var $elie = $('.rotateWindow'); 
    rotate(0); 
    function rotate(degree) { 

      // For webkit browsers: e.g. Chrome 
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
      // For Mozilla browser: e.g. Firefox 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

      // Animate rotation with a recursive call 
     setTimeout(function() { rotate(++degree); },5); 
    } 
});

我該如何解決這個問題，爲什麼會出錯？謝謝你的建議。

來源

2017-08-19 Maciej Hankus

您需要使用transform-origin: 50% 50%，以便您的元素圍繞其中心點旋轉。

來源

2017-08-19 10:40:14 Stuart

它現在正在做，但不是它應該的地方。它應該在頁面的中心做，但不是。沒有動畫它保持在中心的位置，但是當我添加動畫時，它位於中心下方並且右側有一點點 –

和變換原點沒有區別 –

動畫 - 意外位置更改

回答

相關問題