Question

我遇到这个问题，使用1s过渡使用CSS3变换旋转DIV：

在Chrome 23＆amp; OSX 10.7.5上的Safari 6在.rotate-divs转换期间，其他容器中的字体略微变暗。

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

.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：hidden;

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

P.S。我会把之前的答案投票，但我不能因为我没有足够的“声誉”，也不能看到如何评论它

Answer 2

添加

-webkit-backface-visibility: hidden;

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

虽然我不确定这个属性是多么令人兴奋它似乎对字体渲染做了一些事情： http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

......不确定我是否不喜欢这样。

在此处找到：iPhone WebKit CSS animations cause flicker

Answer 3

背面 - 可见性属性确定元素在离开屏幕时是否应该可见，这通常在您“翻转”时使用。和元素。

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

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

希望有所帮助！

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

3 个答案: