动画 - 意外位置更改

我的代码有问题。我想做一个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

它现在正在做，但不是它应该的地方。它应该在页面的中心做，但不是。没有动画它保持在中心的位置，但是当我添加动画时，它位于中心下方并且右侧有一点点 –

和变换原点没有区别 –

动画 - 意外位置更改

回答

相关问题