Question

我使用-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;
}

Answer 1

已经解决了！

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

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

1 个答案: