使用变换后的边框图像之间的间隙:旋转

Question

我正在尝试创建一个带有锯齿状边缘的盒子,它实际上可以用作HTML元素,并且可以调整大小等等.

最后让我的头围绕着边框图像,让它看起来很漂亮,然后当我旋转它时,它在边框图像和主要填充之间产生了一个间隙:

我用Google搜索了一下,并找到了一个答案,告诉别人设置

-webkit-backface-visibility: hidden;

这清除了它,但显然只在webkit浏览器中.

我也尝试过使用-moz-backface-visibility,但它没有在Firefox中清除问题.

有什么建议？

的jsfiddle

e:我实际上认为我可以通过设置背景颜色来修复它,然后设置background-clip为padding-box,但老实说它只是让我处于相同的位置.

Answer 1

解决Webkit和FF问题的一个技巧是设置透视(而不是背面可见性)

.box.one {
    -webkit-transform: perspective(999px) rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    transform: perspective(999px) rotate(1deg);
}

小提琴