我遇到了一个相当奇怪的问题。我有一个可以通过 CSS3 旋转的 div。该 div 有一个前 div 子级和后 div 子级，后 div 具有-webkit-transform: rotateY( 180deg ) set.
问题是，一旦旋转父元素以显示 div 的背面，它只会检测到 div 的一侧（特别是 div 的后半部分或右侧）的子元素的点击。正面 div 检测元素整个面上的点击。此外，z 索引也很好。我认为问题可能是由于旋转和浏览器显示一侧的一半“更近”造成的？
这个破坏的代码非常复杂，所以我创建了一个测试文件来演示下面的问题。我正在使用我为 3D 转换编写的 jQuery 插件，可以在此处找到该插件https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Edit:经过实验，按钮元素的点击只记录了100-200px，而不是0-100px。换句话说，它实际上只在 div 的后半部分注册。
很感谢任何形式的帮助！
<html>
<head>
<style>
.element{
width:200;
height:200;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.element figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
border:1px solid yellow;
}
.element .front {
-webkit-border-radius:8px;
padding: 0px;
margin: 0px;
background-color:yellow;
z-index: 9870;
}
.element .back {
-webkit-border-radius:8px;
padding: 0px;
margin: 0;
-webkit-transform: rotateY( 180deg );
z-index: 0;
border: 1px solid red;
background-color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
<script>
$(function(){
var temp = false;
$(".element").click(function(){
if(temp == false){
$(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
$(this).unbind("mouseenter mouseleave");
button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
button.click(function(){
console.log("Clicking");
});
temp = true;
$(this).append(button);
}
})
})
</script>
</head>
<body>
<div class="element">
<figure class="front"></front>
<figure class="back"></front>
</div>
</body>
</html>
问题的 JSFiddle 示例 - 可以在这里找到！ http://jsfiddle.net/7AbWe/
我知道这个回复对于我们这里的大多数人来说有点太晚了，但是我今天早些时候遇到了这个问题，并且没有一个回复可以帮助我解决它。
解决方案通过@克里斯蒂安基恩 https://stackoverflow.com/a/13144326/1113260使另一半不可点击。我曾是使用容器作为包装器 https://stackoverflow.com/a/8458637/1113260以及。事实证明，这是 webkit 中的一个奇怪的错误，我能够修复它，并通过将transform:rotateY(180deg)更改为transform:rotateY(-180deg)来使100%的元素可点击
这真的很奇怪，我不知道它是如何运作的，但它确实如此。我希望这可以帮助别人！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
