html - Chrome 中 CSS 3D 元素的悬停状态检测

Question

我有一个简单的按钮，悬停时会进行 3d 转换。

它在 Firefox 中运行良好，但在 Chrome 中，“悬停区域”比按钮小。如果按钮没有立即播放动画，感觉不一致，非常糟糕。

演示:http://jsfiddle.net/ZsXkY/

HTML:

<div id="page-wrap">
    <div class="link1">CONTACT</div>
</div> 

CSS 也非常简单，但已添加前缀并包含一些解决方法:

.link1 {
font-family: sans-serif;
position: relative;
font-size: 30px;
color: #fff;
cursor: pointer;
width: 230px;
height: 95px;
line-height: 95px;
background-color: rgba(20,20,20,0.9);
display: inline-block;
margin: 80px 90px;
font-weight: 200;
text-align: center;

-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;

-moz-transform: perspective(1000px);
-ms-transform: perspective(1000px);
-o-transform: perspective(1000px);
-webkit-transform: perspective(1000px);
transform: perspective(1000px);

transform-style: preserve-3d;

outline: 1px solid transparent; /* Workaround Firefox Anti Aliasing */
}

.link1:hover {
-moz-transform: perspective(1000px) rotateY(30deg) translateX(25px);
-ms-transform: perspective(1000px) rotateY(30deg) translateX(25px);
-o-transform: perspective(1000px) rotateY(30deg) translateX(25px);
-webkit-transform: perspective(1000px) rotateY(30deg) translateX(25px);
transform: perspective(1000px) rotateY(30deg) translateX(25px);
}

如果有人能提供帮助，我将非常高兴!

Answer 1

一旦 html 元素旋转，没有 transformZ，它的一部分就会与主体相交，因为它在 z 平面上平放在主体上。

在你的例子中，右边在 body 后面，所以它不能响应鼠标事件。要解决此问题，请使用 transform : translateZ 将元素向前移动。

例子:

 transform: perspective(1000px) rotateY(30deg) translateX(25px) translateZ(200px);

可以使用 transform: scale 来对抗尺寸的增加。在 webkit 中试试这个 fiddle :
http://jsfiddle.net/ZsXkY/2/

您必须对其进行微调以获得您想要的精确定位。请记住，您可以设置 transform-origin 来控制发生变换的“轴”。

Firefox 处理 z 平面问题的方式似乎与 chrome 不同。