css与过渡旋转似乎影响其他元素不透明？

我已用DIV这个问题被用CSS3旋转变换使用1S过渡：css与过渡旋转似乎影响其他元素不透明？

在铬23 &的Safari 6上OSX 10.7.5在其它容器的字体被稍稍变暗，在.rotate-div的过渡。

关于是什么原因以及如何避免它的任何想法？

.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'); 
});

来源

2012-12-28 Max Girkens

这是硬件加速，我不认为你可以解决这个问题。在我的情况下，当我玩--transform：scale（1.2）发生同样的事情。这里是一个演示。滚动在.normal（中）：http://jsfiddle.net/ignaciocorreia/tTa5r/1/ –

我看到了 - 谢谢。奇怪的是，我正在一个网站上工作，这不会影响所有其他元素，但只有与css positione：relative ... –

这将是一些新的东西，对我来说很有趣。会很棒如果你可以分享链接。 –

的背面能见度属性决定当它面对远离屏幕的元素应该是可见或不可见，常用当你“翻转”和元素。

在这种情况下，它似乎有当您添加相同的效果：

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

希望帮助！

来源

2012-12-29 11:15:46

它肯定会:)非常感谢！ –

谢谢！ -webkit-transform：translate3d（0,0,0）;完美适合我的使用！ – Daniela

加入

-webkit-backface-visibility: hidden;

到所有受影响的元素，似乎以帮助这个问题：http://jsfiddle.net/tTa5r/2/

虽然我不知道这是什么性质excatly确实似乎做一些事来的字体渲染： http://jsfiddle.net/tTa5r/ VS http://jsfiddle.net/tTa5r/2/

...不知道如果我不喜欢的是，虽然。

这里找到：iPhone WebKit CSS animations cause flicker

来源

2012-12-28 15:53:00

我发现这很有用，'-webkit-font-smoothing：antialiased'在我的Chrome 24，PC上不会做任何事情。 – vsync

-webkit-backface-visibility：hidden;

也为我工作...它添加到元素我已经

附：变换我会投票以前的答案，但我不能够作为我没有足够的“声誉”，也不能看到如何评论它

来源

2013-03-08 12:51:01

你可以upvote一旦你收集代表:-) – kleopatra

是的我知道，但我不能得到代表。我必须添加像我以上支持以前的解决方案的评论。这个解决方案可以帮助许多人，但没有人知道，因为他们不能投票。 –

css与过渡旋转似乎影响其他元素不透明？

回答

相关问题