如何用css transorm解决“副作用”？

Question

我想在我的页面上制作元素“倾斜”，更准确地说我有一个.svg图像（大小100px 100px）所以我有这两个css类，我有一些奇怪的效果，一些小的白线在左上角。

我试图添加

-webkit-背面能见度：隐藏;

但如果我在页面加载时不悬停，它只能在Chrome中解决问题。

.tilt {    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tilt:hover {    
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-500deg);
    -o-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
}