translate2d出现模糊的原因是因为元素的高度、宽度中有奇数, 使用translate(-50%,-50%)之后,相当于宽度、高度除以2的效果,会出现 0.5px。浏览器能分辨的最小像素为1px,因此出现了模糊。
所以使用translate(-50%,-50%)的时候,一定要 注意 让 元素的 宽度、高度为偶数。
使用translate3d,里面的值用固定参数而不是百分比,如translate3d(50px,10px,10px), 则不会模糊。原因尚未明确。
个人猜测 当translate3d内的值为百分比时,实际计算出来的结果会出现小数,因为chrome渲染的原因,所以会模糊(FF不会出现边框模糊) 。
网友评论