4
私はかなり奇妙な問題に遭遇しました。私はCSS3経由で回転可能なdivを持っています。 divには、前部div子と後div子があり、後ろdivには-webkit-transform: rotateY(180deg)が設定されています。180度回転されたdivは片側からのみクリック可能です
親要素が回転してdivの背面を表示すると、divの1つの側、具体的にはdivまたは右側の後半の子要素のクリックしか検出されないという問題があります。フロントサイドのdivは、要素の面全体のクリックを検出します。また、z-インデックスは正常です。私は問題が回転とブラウザの半分を「近くに」表示していることが原因であると思われますか？
これが壊れているコードは非常に複雑なので、私は以下の問題を示すテストファイルを作成しました。私はここで見つけることができる3D変換のために書いた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>
A JSFiddle Example of the Problem - Can be found HERE!
は、あなたがこのためにhttp://jsfiddle.net/を一緒に入れて気にしませんか？ – Filip
問題の例を含めるように質問を編集しました.3D変換用のjqueryプラグインをダウンロードする必要があります。ありがとう！ –
私がに取り組んで、同じ問題を抱えている[jsfiddle]（http://jsfiddle.net/theredhead/rZT2k/） – Kris