css rotate with transition seem to affect other elements opacity?

I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition: 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); } the flip class is added/removed using jquery: $('.rotate').on('click', function(){ $(this).toggleClass('flip'); });​
This is hardware acceleration and I don't think you can fix this. In my cases when I play with -transform:scale(1.2) happens the same thing. Here is a demo. Rollover in the .normal one (middle): jsfiddle.net/ignaciocorreia/tTa5r/1

以上就是css rotate with transition seem to affect other elements opacity?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏