Я столкнулся с довольно странной проблемой.У меня есть div, который вращается через CSS3.У div есть передний div-потомок и back div-дочерний элемент, при этом задний div имеет -webkit-transform: rotateY( 180deg ) set.
Проблема в том, что когда родительский элемент поворачивается для отображения задней стороны div, он обнаруживает толькощелчки дочерних элементов точно на одной стороне div, особенно во второй половине div или на правой стороне.Передняя сторона div обнаруживает щелчки по всей поверхности элемента.Кроме того, z-индексы в порядке.Я предполагаю, что проблема может быть связана с поворотом и отображением в браузере одной половины стороны «ближе»?
Код, который он взламывает, чрезвычайно сложен, поэтому я создал тестовый файл, чтобы продемонстрировать проблему ниже.Я использую плагин jQuery, который я написал для трехмерных преобразований, который можно найти здесь https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Редактировать: После эксперимента нажатие на элемент кнопки регистрируется только от 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 ПримерПроблема - можно найти ЗДЕСЬ!