我有以下小提琴：
http://jsfiddle.net/cYwkz/
http://jsfiddle.net/cYwkz/
我正在使用以下CSS：
article {
border: 2px solid #cccccc;
background-color: #e5e5e5;
border-radius: 5px;
display: inline-block;
height: 150px;
margin: 0 2% 32px;
position: relative;
vertical-align: top;
width: 160px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
article:hover {
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-o-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
}
当我悬停文章的左下角时,悬停和变换工作正常.但是,当我将鼠标悬停在右上角时,变换会闪烁,有时甚至根本不会启动.
我在Firefox中没有这些问题.
系统：Mac OSX 10.9.1
适用于：Firefox 26,Firefox Aurora 28,IE10
失败：Chrome 32,Safari 7.0.1,Opera Next 19
希望你们能帮忙！提前致谢
解决方法
问题在于,在webkit中,位于z = 0的平面得到悬停事件(可以这么说).
由于您的旋转使元素(特别是右上部)消失(或在屏幕内),因此它们会进入z平面并且不再触发悬停.
您可以解决将它们移向z正面的问题：
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg)
translateZ(10px) scale(1.025);
要避免悬停状态下的Z移动,请在基本状态下设置相同的Z.
-webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg)
translateZ(10px) scale(1);
在使用转换时,以与转换状态相同的方式设置基本转换始终是一个好主意.这就是我设置0deg旋转的原因.
