转换旋转会导致Chrome闪烁黑屏。它是Chrome的错误(在Safari中工作正常)，或者可以使用一些聪明的CSS修复它。
div {
width:200px;
height:200px;
position:relative;
background:#ddd;
}
span {
display:inline-block;
position:absolute;
top:40px;
left:40px;
width:20px;
background:#007;
height:10px;
-webkit-transition: all .5s;
}
div:hover > span {
-webkit-transform: rotate(180deg);
}@H_502_3@
<div>
<span></span>
</div>@H_502_3@
示例fiddle here。
这个问题的问题是，它不会每次都发生，所以你必须多次悬停灰色方块，你应该看到屏幕闪烁黑色。
测试：
铬16.0.912.75
Chrome Canary 18.0.1010.0
工作正常：
Safari 5.1.2(6534.52.7)
所有测试雪豹
解决方法
通过将-webkit-transform：translate3D(0，0，0)赋值给已转换元素的父代，可以强制合成来强制合成。
div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0,0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }@H_502_3@
<div>
<span></span>
</div>@H_502_3@
