使用透视、旋转、旋转和缩放时Webkit中的CSS变换悬停错误

我有以下几把小提琴：

我正在使用以下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);

使用转换时，最好以与转换状态相同的方式设置基本转换。这就是我设置0度旋转的原因

我在下面使用了这个代码

<style>    
.outer div {
        float: left;
        -webkit-perspective: 200px;
        -webkit-transform-style: preserve-3d;
    }
    .outer a {
        -webkit-transition: all 1.0s ease-in-out;
        background:#0F6;
        width:100px;
        height:100px;
        display:block;
        -webkit-transform: rotateY(45deg);
    }
    .outer div:hover a {
        -webkit-transform: none;
    }
</style>

    <div class="outer">
        <div>
            <a href="http://www.google.com/"></a>
        </div>
    </div>

.外分区{
浮动：左；
-webkit透视图：200px；
-webkit变换样式：保留-3d；
}
.外部a{
-webkit过渡：所有1.0都易于输入输出；
背景：#0F6；
宽度：100px；
高度：100px；
显示：块；
-webkit变换：旋转（45度）；
}
.外分区：悬停a{
-webkit转换：无；
}

---

这个解决方案适用于我的chrome

我相信这是因为Webkit中的转换仍然带有前缀，这是不稳定的。我可以确认，即使在Chrome34（迄今为止最新的金丝雀，OSX）中也存在该漏洞。您可以设置任何您喜欢的值，只要该值足够高，可以将所有div移动到z平面之上。一个更为数学化的方法是绕右上角旋转（这样网的移动就会上升），但我不知道如何设置基本状态。很抱歉反应太晚，但它解决了我的问题：D谢谢！