css3 – 带转换的CSS旋转似乎会影响其他元素的不透明度？

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

在Chrome 23& OSX 10.7.5上的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添加/删除flip类：

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

背面可见性属性确定元素在离开屏幕时是否应该是可见的,通常在“翻转”和元素时使用.

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

-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/

希望有所帮助！