translate2d出現(xiàn)模糊的原因是因?yàn)樵氐母叨劝沉痢挾戎杏衅鏀?shù)沥邻, 使用translate(-50%,-50%)之后平项,相當(dāng)于寬度赫舒、高度除以2的效果,會出現(xiàn) 0.5px闽瓢。瀏覽器能分辨的最小像素為1px接癌,因此出現(xiàn)了模糊。
所以使用translate(-50%,-50%)的時候扣讼,一定要 注意 讓 元素的 寬度缺猛、高度為偶數(shù)。
使用translate3d椭符,里面的值用固定參數(shù)而不是百分比荔燎,如translate3d(50px,10px,10px), 則不會模糊。原因尚未明確销钝。
個人猜測 當(dāng)translate3d內(nèi)的值為百分比時有咨,實(shí)際計(jì)算出來的結(jié)果會出現(xiàn)小數(shù),因?yàn)閏hrome渲染的原因蒸健,所以會模糊(FF不會出現(xiàn)邊框模糊) 座享。