3D 转换分辨率问题答案

【问题标题】：3D Transformation Resolution Issue3D 转换分辨率问题
【发布时间】：2012-11-13 22:37:31
【问题描述】：

当我在父元素上设置透视图时对元素使用 X 或 Y 旋转时，转换后的元素的分辨率似乎下降到原始元素的拉伸位图版本，而不是保持其自己的分辨率。

当 X/Y 旋转被移除时，这种扭曲不会发生。 Z 旋转似乎可以很好地处理而不会降低分辨率。如果关闭透视，分辨率似乎也正常。

/* # Bug # */
/* Removing the perspective gets rid of the resolution drop */
body { perspective: 200px; }

/*/ 
 * X and Y rotations cause the resolution to drop
 * while the Z rotation doesn't 
/*/
#test {
    transform: scaleX(5) scaleY(5) rotateX(2deg);
}

这似乎发生在 Firefox、Chrome 和 Safari (XP) 中。有没有办法解决这个问题？（除了增加原始元素的大小然后缩小）

【问题讨论】：

标签： html css 3d transform

【解决方案1】：

我相信您遇到了 GPU 与非 GPU 的转换。当某些东西被交给 GPU 时，它会获取它所交给的任何东西的光栅化副本，然后拉伸、挤压和插入像素。由于由浏览器决定将什么交给 GPU，因此您必须绝地武断地欺骗浏览器使其不执行 GPU 卸载 (YMMV)。或者，按照您的建议，使用大元素/图像并将最大比例设置为 1。

【讨论】：