Webkit浏览器中禁用transform: rotate()旋转HTML元素的抗锯齿

我来帮你搞定WebKit内核浏览器（Chrome、Safari这类）里旋转方形的无抗锯齿渲染问题！你已经在Firefox用transform: translateZ(1px) rotate(45deg);实现了效果，下面给你几个针对WebKit的可行方案：

方案1：3D透视+translateZ组合 #

WebKit对3D变换的抗锯齿逻辑和2D不一样，给父元素加透视属性，再给旋转的方形配上translateZ，能强制关闭边缘平滑处理：

/* 父容器 */
.square-wrap {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* 你的旋转方形 */
.rotated-square {
  width: 100px;
  height: 100px;
  background: #000;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(1px) rotate(45deg);
  transform: translateZ(1px) rotate(45deg);
}

方案2：用image-rendering强制像素化渲染 #

虽然image-rendering原本是针对图片的，但对纯色元素的旋转边缘也能生效，直接告诉浏览器用像素化渲染代替抗锯齿：

.rotated-square {
  width: 100px;
  height: 100px;
  background: #000;
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

如果遇到旧版WebKit浏览器不生效，可以把pixelated换成-webkit-image-rendering: crisp-edges;试试。

方案3：backface-visibility触发硬件加速 #

开启硬件加速会改变WebKit的抗锯齿策略，配合translateZ(0)就能达到效果：

.rotated-square {
  width: 100px;
  height: 100px;
  background: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) rotate(45deg);
  transform: translateZ(0) rotate(45deg);
}

你可以根据自己的实际场景测试这几个方案，哪个效果最符合预期就用哪个~

内容的提问来源于stack exchange，提问作者Yonic