css变换锯齿状边缘解决办法

Chrome中的边框看起来很混乱，就像没有抗锯齿的（低分辨率）游戏一样。
旋转的照片和文字本身看起来很好，只是看起来像锯齿状的边框。

下面是一些常用的解决办法

• 如果有人在以后搜索这个，那么摆脱Chrome中CSS转换的锯齿状边缘的一个好方法是添加CSS属性-webkit-backface-visibility，其值为hidden。在我自己的测试中，这已经完全平滑了它们。 希望有所帮助。

  -webkit-backface-visibility: hidden;

• 如果您使用的是outline: 1px solid transparent;而不是transform,-webkit-backface-visibility: hidden;不起作用。 在动画期间，透明png文件会出现锯齿状边缘。

• 为了解决这个问题，我使用添加1px透明边框将触发抗锯齿

  outline: 1px solid transparent;

• 尝试3d变换.

  -webkit-transform-style: preserve-3d; 
  -webkit-transform: rotateZ(2deg);

• 添加1px透明边框将触发抗锯齿或者或者添加1px透明框阴影

  outline: 1px solid transparent;
  box-shadow: 0 0 1px rgba(255,255,255,0);

• 使用-webkit-backface-visibility: initial; 代替-webkit-backface-visibility: hidden;

• 添加转换触发抗锯齿

  -webkit-transform-style: preserve-3d;

• 添加透视

  -webkit-perspective: 1000;