Question

使用以下代码，我将对象放置在网页两侧的某个角度。一个角将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％并应用背景尺寸：100％将图像吹出来，现在看起来很好100％放大。只需要调整一些色调，我们就是金色的。我将把这个留在这里，以备将来使用-webkit-transform锯齿状图像供Google员工享用。

-webkit-transform：在Chrome中生成锯齿状线条

1 个答案: