JQuery函數扭曲圖像。怎麼修？

Question

親眼見證。我無法弄清楚是否有可能擺脫奇怪的彩色邊框。此代碼的要點是能夠旋轉圖像並同時更改其顏色。代碼的方式，圖像的顏色和角度可以很容易地編碼爲動態的。這段代碼使用了一個白色的png圖像，但是它的爪子形狀有一個透明層。這樣當你編輯背景顏色時，它會改變圖像的顏色。如果它不是用於添加到圖像中的奇怪邊框，它會很好用...注意，如果您刪除了旋轉功能，則不會出現惱人的邊框。

包括JQuery的1.8.2，這裏是HTML/CSS代碼：

CSS：

.image { 
display: inline-block; 
margin-left:auto; 
margin-right:auto; 
background-color: blue; 


transform: rotate(30deg); 


} 

HTML：

<span class="icon"></span>​ 

Answer 1

添加此：-webkit-backface-visibility:hidden;解決了這個問題對我來說

Answer 2

爪子是通過在png中使其區域透明並設置背景而創建的紅色和周邊地區白色。

我的建議是，相反。在你的png中用紅色填充爪子，並使其周圍的空間保持透明。至少在你的小提琴中，由於背景顏色將設置爲白色，因此不會再有紅線。