Question

我使用以下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旋转的原因。

fiddle

Answer 2

我使用下面的代码

<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>

此解决方案适用于我的Chrome。 http://jsfiddle.net/jaxweb/7qtLD/7/

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

2 个答案:

fiddle