我遇到了一个相当奇怪的问题.我有一个可以通过
CSS3旋转的div. div有一个前div子和后div子,后面div有-webkit-transform：rotateY(180deg)set.
一旦父元素被旋转以显示div的背面的问题,它将仅检测div的一侧上的子元素的点击,特别是div或右侧的后半部分.正面div检测元素整个面上的咔嗒声.此外,z指数很好.我认为问题可能是由于旋转和浏览器显示一半“更近”？
编辑：经过实验,单击按钮元素只能记录100-200px而不是0-100px.换句话说,它实际上只是在div的后半部分注册.
很感谢任何形式的帮助！
.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;
}
$(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);
}
})
})
