css rotate with transition 似乎会影响其他元素的不透明度?

标签 css webkit transform css-transitions

我遇到了使用 1s 转换通过 CSS3 转换旋转 DIV 的问题:

在 OSX 10.7.5 上的 Chrome 23 和 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 添加/删除翻转类:

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

最佳答案

-webkit-backface-visibility: hidden;

也对我有用...将它添加到我已经转换的元素中

附注我会投票赞成以前的答案,但我不能,因为我没有足够的“声誉”,也看不到如何评论它

关于css rotate with transition 似乎会影响其他元素的不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14070056/

相关文章:

css - 使用 CSS wave 的动画文本

java - 在 GWT 中布局元素的最佳方式是什么?

javascript - jQuery 单击在 webkit 浏览器中不触发

jQuery .innerWidth() 在不同浏览器中给出不同的值

css - React Native 转换原点

templates - 如何使用模板返回节点集

jquery - css和js圈圈倒计时进度

css - 将网格中的按钮对齐到中心

css - 如何在 Webkit (Safari/Chrome) 中动态加载 css 规则?

java - 从 RGB 转换为 CMYK 的任何更快的算法