谷歌瀏覽器逆時針旋轉，但應該是順時針的

我有這個CSS，我用於打開/關閉屬性項目的三角形，當我點擊三角形時，我應用「is-active」類三角形從左向右指向順時針方向（在IE，FireFox，Safari中運行正常），但在最新版本的Chrome中，它逆時針旋轉，現在從我讀過的應該只是如果rotate（）值中的數字爲負數，則逆時針旋轉。谷歌瀏覽器逆時針旋轉，但應該是順時針的

任何想法或任何人都看過嗎？

<html> 
<head> 

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 

<style> 
body { 
    font-family: arial,verdana, sans-serif; 
    font-size: 12px; 
} 
.accordion-trigger:before { 
    content: ""; 
    display: inline-block; 
    height: 0; 
    width: 0; 
    -webkit-transform: rotate(360deg); 
    border-width: 5px 10px; 
    border-style: solid; 
    border-color: transparent; 
    border-left-color: #666666; 
    border-right-width: 0; 
    margin-right: 0.5em; 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s; 
    -ms-transform: rotate(0); 
    transform: rotate(0); 

} 
.accordion-trigger.is-active:before { 
    -webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    border-left-color: Black; 
} 
.container 
{ 
    background-color: #e6e6e6; 
    height: 18px; 
    width: 100px; 
    padding: 8px 0px 0px 8px; 
    border: 1px solid #999999; 
    -webkit-border: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px;  
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="accordion-trigger" onclick="Rotate(this)"></div>   
</div> 

<script> 

function Rotate(entity) { 
    $(entity).toggleClass("is-active"); 
} 

</script> 
</body> 
</html>

來源

2014-01-09 sbarnby71

在哪裏是起源？ – dougajmcdonald

我已經更新了代碼示例，現在模擬顯示所有代碼。 – sbarnby71

您對CSS的一個問題：你在的遊戲內的旋轉在所有瀏覽器，除了-webkit-瀏覽器，您可以設置360設置爲0：

.accordion-trigger:before { 
    -webkit-transform: rotate(360deg); /*Change this to 0*/ 
    -ms-transform: rotate(0); 
    transform: rotate(0); 
}

入住這Fiddle Demo

來源

2014-01-09 16:12:51 DaniP

是的，這是問題，我被建議設置，由於舊版本的Safari中的錯誤，但我可以忍受，並希望它在Chrome中正常工作。非常感謝 – sbarnby71

谷歌瀏覽器逆時針旋轉，但應該是順時針的

回答

相關問題