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中用红色填充爪子并使其周围的空间透明。至少在你的小提琴中，它周围不再有红线，因为背景颜色将被设置为白色。