css旋转与转换似乎影响其他元素不透明度？ [英] css rotate with transition seem to affect other elements opacity?

问题描述

我遇到这个问题，一个DIV使用CSS3转换使用1s转换：

I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:

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

In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.

有什么原因导致此问题以及如何避免

Any ideas on what causes this and how to avoid it?

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类：

the flip class is added/removed using jquery:

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

推荐答案

背面可见性属性确定当元素面向屏幕时，元素是否应该可见，通常在翻转和元素时使用。

The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.

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

In this case, it seems that it has the same effect as when you add:

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

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

这会强制硬件加速，使您略微更薄（抗锯齿） ，但在过渡之前和之后更一致的字体呈现。

which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.

还有第三个选项，它是添加：

There is a third option as well, and that is to add:

-webkit-font-smoothing: antialiased;

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

我回答了类似的问题，@mddw发布了一个链接到一个描述抗锯齿方法的博客文章，这似乎是为什么你在过渡期间和之后看到差异的原因。

I answered a similar question before and @mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.

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

希望帮助！

这篇关于css旋转与转换似乎影响其他元素不透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！