變換旋轉在鉻合金中工作不正常

以下代碼在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這並不意味着要解決問題的根本。這是爲了視覺上看起來不錯;-)問題似乎是一個問題，如何鉻計算'邊界半徑'我試圖驗證這一點通過旋轉沒有'邊界半徑'，但很難確認它圍繞正確的樞軸點旋轉，製作一個完美的圓角...... –

變換旋轉在鉻合金中工作不正常

回答

相關問題