变换旋转在铬合金中工作不正常

以下代码在safari中呈现完美的旋转圆圈，，但不在铬合金中。变换旋转在铬合金中工作不正常

<style> 
.circle{ 
    height:1000px; 
    width:1000px; 
    background-color:#000; 
    border-radius: 50%; 
} 

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

.rotating { 
    -webkit-animation: rotating 2s linear infinite; 
    -webkit-transform-origin: center; 
} 
</style> 

<div class="circle rotating"> 
</div>

http://jsfiddle.net/p4ban9cs/

它并不完美呈现，转了一大圈，当这个问题是可见的，这就像在Chrome扭动一圈。

谢谢你的帮助。

来源

2014-12-23 ensixte

见过如此有什么问题，不旋转？不完美的圈子？ –

你的小提琴在Chrome中适合我。 –

@AndréDion对于我来说，它呈现出一个“摆动”的圈子（chrome 39 wind 7） –

添加外层元素作为封装和应用相同的造型吧，掩盖内圈旋转在本Fiddle

<div class="overlay"> 
    <div class="circle rotating">Test</div> 
</div> 

.overlay{ 
    height:1000px; 
    width:1000px; 
    box-shadow:0 0 0 10px #000 ; 
    background:black; 
    border-radius: 50%; 
}

来源

2014-12-23 14:03:46

谢谢你的帮助=），但它似乎并没有工作，只是改变覆盖框的阴影颜色看看结果http://jsfiddle.net/p4ban9cs/18 /具有相同的颜色，它看起来是正确的，但这并不能解决问题，我尝试了很多隐藏技巧，但没有人能够工作（没有视觉上完美的结果），这就是为什么我去了问题的根源，为什么Chrome会呈现这样的画面？！再次感谢您的帮助。 – ensixte

@ensixte这并不意味着要解决问题的根本。这是为了视觉上看起来不错;-)问题似乎是一个问题，如何铬计算'边界半径'我试图验证这一点通过旋转没有'边界半径'，但很难确认它围绕正确的枢轴点旋转，制作一个完美的圆角...... –

变换旋转在铬合金中工作不正常

回答

相关问题