Jus*_*kva 5 html css webkit-transform webkit-transition
已解决- 问题是进行旋转会将一半元素置于网页的中性（零）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);
}
这似乎是一个 chrome 错误，因为如果您删除原始视角并仅将其悬停在鼠标上，那么它就可以完美工作。
（例如http://jsfiddle.net/mMYrf/1/）
为了使其工作，您可以做的就是创建一个填充透视区域的外部容器，并在悬停时为内部元素提供悬停效果。
（例如http://jsfiddle.net/mMYrf/2/）
顺便说一句，效果很棒:)