使用perspective,rotateX,rotateY和scale时,CSS转换Webkit中的悬停错误

Question

我有以下小提琴: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

希望你们能帮忙!提前致谢

Answer 1

问题产生于这样的事实:在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旋转的原因.

小提琴