只能从一侧单击180度旋转的div [英] 180 degree rotated div is only clickable from one side
问题描述
我遇到了一个很奇怪的问题.我有一个可通过CSS3旋转的div.div有一个前div子对象和一个后div子对象，而后div设置了 -webkit-transform:rotateY(180deg).
I've run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.
问题是，一旦旋转父元素以显示div的背面，它将仅在div的恰好一侧(特别是div的后半部分或右侧)检测子元素的点击.正面div会检测到元素整个表面上的点击.同样，z索引也不错.我认为问题可能是由于旋转和浏览器显示一侧"closer"的一半?
The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side "closer"?
要破坏的代码非常复杂，因此我创建了一个测试文件来演示以下问题.我使用的是为3D转换编写的jQuery插件，可在此处找到 https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js .
The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I'm using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
编辑:实验后，按钮元素的点击仅注册100-200px，而不注册0-100px.换句话说，它实际上仅在div的后半部分注册.
After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the 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>
推荐答案
似乎您丢失了一个容器(与我丢失它的方式几乎相同).
it seems that you are missing a container (in much the same way I was missing it).
请参见官方文档
不是外部元素被翻转，而是内部的包装器.反过来导致显示两个div之一(并发生过渡)
it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)
这篇关于只能从一侧单击180度旋转的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
