Question

已解决 - 问题在于进行旋转会将元素的一半放在网页的中性（零）Z轴之后，而WebKit显然不允许鼠标事件通过“中性” “飞机。因此，将旋转点更改为面板的右/左边缘可以解决问题。很奇怪，但现在它有效。

我有一个简单的HTML5 / CSS3页面，里面有四个面板。这些面板使用-webkit-transform将它们组合成一个很好的安排。 On：hover，我使用-webkit-transform将面板调到前台。代码如下。

发生的事情是：悬停动作不可靠。如果我将鼠标滑过面板，通常会停止移动鼠标，将鼠标悬停在面板上，但面板仍处于原始位置。具体来说，从左向右滑动，最左边的两个面板似乎工作正常，但最右边的两个面板不会向上扩展，直到鼠标在面板中间。

导致这种情况的原因是什么？

编辑：快速跟进，看起来放置在变换后的元素中的链接只能在最左边（对于左边的两个面板）或最右边（对于两个右边的面板）可以在元素的一半上单击。换句话说，点击区域仅对元素的“更接近”的一半有效。

首先，HTML（最小例子）：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <article class="tr_left"></article>
    <article class="tr_midleft"></article>
    <article class="tr_midright"></article>
    <article class="tr_right"></article>
</section>
</body>
</html>

CSS：

#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}

#test article.tr_left {
    -webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}

#test article.tr_midleft {
    -webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}

#test article.tr_midright {
    -webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}

#test article.tr_right {
    -webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}

#test article:hover, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}

Answer 1

它似乎是一个铬虫，因为如果你删除原始视角并且只在悬停上有它，它就可以完美。

（ex http://jsfiddle.net/mMYrf/1/）

然后你可以做些什么才能使其工作，可以创建一个外部容器，填充透视区域和悬停，给内部元素悬停效果。

（例如http://jsfiddle.net/mMYrf/2/）

令人敬畏的效果btw：）

Answer 2

我遇到了同样的问题，只有前50％的链接是可以浏览和可点击的，而整个元素仍然可见。我通过将translateZ（1px）添加到我的-webkit-transform来修复此问题。这使得整个元件位于Z轴前方，使其完全可以放置和可点击。然而，翻译有1px变焦，但它不明显。在处理这个问题之前，必须这样做！

CSS转换和悬停属性

2 个答案: