html - -webkit-转换 : producing jagged lines in Chrome

Question

使用以下代码，我将对象以一定 Angular 放置在网页的任一侧。一个将 div 向左倾斜一点，另一个向右倾斜。

左边:

-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg) ;

向右:

-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);

问题截图:

100% Zoom

如您所见，在 Chrome 中，边缘在正常缩放级别下变得非常参差不齐。

300% Zoom

在 300% 时，线条变得更加清晰....这是为什么？

500% Zoom

在 500% 时，虽然我无法滚动到图像中很远，但我能够分辨出比 100% 缩放更大的差异，我不确定为什么。您可能会认为情况恰恰相反，因为在放大时我应该“将其放大”……我可能在这里假设得太多了。 所以我问社区， 为什么我的线条在 -webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg) 之后变得参差不齐;

我已经尝试了一些东西，包括添加这个:

-webkit-backface-visibility: hidden;

或者这个:

 /* Due to a bug in the anti-liasing*/
 -webkit-transform-style: preserve-3d; 
 -webkit-transform: rotateZ(2deg);

没有成功...

如果需要，我可以提供指向我正在使用的代码的链接，但是我觉得我提供的代码行本身可能就是罪魁祸首。

谢谢，

詹姆斯

编辑:我觉得没有应用 webkit-transform 的 div 图像是必要的。

Here it is

Answer 1

我创建的图片比它要填充的 420px X 60px div (210px x 30px) 小 50%，并应用 background-size: 100% 将图片放大，现在 100% 看起来不错飞涨。只需要调整一些色调，我们就是金色的。我将把它留在这里，供 Google 员工将来欣赏任何 -webkit-transform 锯齿状图像。