css - css 随着过渡旋转似乎会影响其他元素的不透明度？

Question

我有一个 DIV 使用 1s 转换通过 CSS3 转换旋转的问题：

在 OSX 10.7.5 上的 Chrome 23 和 Safari 6 中，在 .rotate-divs 过渡期间，其他容器中的字体会略微变暗。

关于导致这种情况以及如何避免这种情况的任何想法？

http://jsfiddle.net/tTa5r/

.rotate{
  background: green;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.rotate.flip{
  -moz-transform: rotate(540deg);
  -webkit-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}

使用 jquery 添加/删除翻转类：

$('.rotate').on('click', function(){
  $(this).toggleClass('flip');
});​

Answer 1

-webkit-backface-visibility：隐藏；

也为我工作......将它添加到我已经转换的元素中

ps我会投票赞成以前的答案，但我不能，因为我没有足够的“声誉”，我也看不到如何评论它

Answer 2

添加

-webkit-backface-visibility: hidden;

对于所有受影响的元素，似乎有助于解决这个问题：http: //jsfiddle.net/tTa5r/2/

虽然我不确定这个属性是做什么的，但它似乎对字体渲染有影响：http: //jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

...不知道我是否不喜欢那样，不过。

在这里找到：iPhone WebKit CSS 动画导致闪烁

Answer 3

backface-visibility 属性确定元素在背离屏幕时是否可见，通常在“翻转”元素时使用。

在这种情况下，它似乎与添加时具有相同的效果：

-webkit-transform: translate3d(0,0,0);

演示 - http://jsfiddle.net/tTa5r/4/

这会强制硬件加速为您提供稍微更薄（抗锯齿），但在转换之前和之后更一致的字体渲染。

还有第三种选择，那就是添加：

-webkit-font-smoothing: antialiased;

演示 - http://jsfiddle.net/tTa5r/3/

我之前回答了一个类似的问题，@mddw 发布了一条评论链接到一篇描述抗锯齿方法的博客文章，这似乎是您在转换期间和之后看到差异的原因。

http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/

希望有帮助！