アニメーション - 予期しない位置変更

Question

私のコードに問題があります。 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); 
    } 
}); 

どうすれば問題が解決できますか？ アドバイスをいただきありがとうございます。

Answer 1

transform-origin: 50% 50%を使用する必要があります。エレメントはその中心点を中心にピボットします。