在 Chrome 中使用 webkit-transform 旋转时文本模糊答案

【问题标题】：Blurry text when rotating with webkit-transform in Chrome在 Chrome 中使用 webkit-transform 旋转时文本模糊
【发布时间】：2014-09-06 23:32:45
【问题描述】：

我使用-webkit-transform: rotate() 旋转一个元素，但问题是这在 Google Chrome 中无法正常工作。它看起来像 Photoshop 中的平滑字体。

我添加了translate3d()，但这不起作用。

你能告诉我这是正常行为还是有办法解决这个问题？

.rotate {
  -webkit-transform: rotate(-3.5deg) translate3d( 0, 0, 0);  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(-3.5deg);  /* Firefox 3.5-15 */
  -ms-transform: rotate(-3.5deg);  /* IE 9 */
  -o-transform: rotate(-3.5deg);  /* Opera 10.50-12.00 */
  transform: rotate(-3.5deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */

  -webkit-transform-origin: 0 0;    
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.inverse {
  -webkit-transform: rotate(3.5deg) translate3d( 0, 0, 0);  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(3.5deg);  /* Firefox 3.5-15 */
  -ms-transform: rotate(3.5deg);  /* IE 9 */
  -o-transform: rotate(3.5deg);  /* Opera 10.50-12.00 */
  transform: rotate(3.5deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

【问题讨论】：

标签： google-chrome rotation webkit

【解决方案1】：

解决了！

问题不在于 Google Chrome，而在于 LayerSlider。使用z-index 和绝对位置我解决了这个问题。

【讨论】：

我也有同样的问题。你在哪里添加 z-index 和绝对位置？