5

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

我有一个带有四个面板的简单 HTML5/CSS3 页面。这些面板使用 -webkit-transform 将它们形成一个很好的排列。在 :hover 上，我使用 -webkit-transform 将面板带到前台。代码如下。

发生的情况是 :hover 动作不可靠。如果我在面板上滑动鼠标，通常会在鼠标悬停在面板上时停止移动鼠标，但面板仍处于其原始位置。具体来说，从左向右滑动，最左边的两个面板似乎工作正常，但最右边的两个不会放大，直到鼠标穿过面板的一半。

什么会导致这个？

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

首先，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);
}
4

2 回答 2

4

它似乎是一个 chrome 错误，因为如果您删除原始透视图并仅将其悬停在悬停上，它就可以完美运行。

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

然后你可以做些什么来让它工作，可能是创建一个填充透视区域的外部容器，并在悬停时为内部元素提供悬停效果。

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

顺便说一句，效果很棒:)

于 2011-10-14T07:54:41.220 回答
2

我遇到了同样的问题，只有前 50% 的链接是可悬停和可点击的，而整个元素仍然可见。我通过将 translateZ(1px) 添加到我的 -webkit-transform 来解决此问题。这会将整个元素带到 Z 轴的前面，并使其完全可悬停和可点击。然而，translateZ 有 1px 的缩放，但并不明显。在解决这个问题之前，这将不得不做！

于 2011-11-01T05:43:42.360 回答