Есть ли в настоящее время в событии мыши javascript какие-либо данные, которые позволили бы мне легко найти или вычислить положение мыши относительно трехмерного пространства преобразованного элемента?
Для визуальной иллюстрации,
Слева - div без трехмерной матрицы, справа - div после трехмерного преобразования.
o
- источник события мыши
+
/|
/ |
+-----+ + |
| | | |
| o| => | o|
| | | |
+-----+ + |
\ |
\|
+
В приведенном ниже скрипте щелчок по тем же пикселям в div будет сообщать event.layerX
, который находится во 2-м пространстве преобразования документа / экрана.
Я в курсе, но не в восторге от перспективы синтаксического анализа div matrix3d и использования этого для умножения на позицию события, чтобы обнаружить это, однако в реальной реализации divs будут иметь более сложные преобразования, и это потребует выполняться в каждом кадре для более чем одного объекта, и я беспокоюсь о накладных расходах, которые могут возникнуть ... Я, конечно, не возражал бы, если бы это был мой единственный вариант.
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title></title>
<style type="text/css" media="screen">
body {
background-color: #FFF;
}
img {
position: absolute;
}
#main {
margin: 0;
-webkit-perspective: 1800;
}
#card {
position: relative;
margin: 0 auto;
width: 420px;
height: 562px;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: center center;
}
#card .page {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: left center;
}
#card .page .face {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: flat;
}
#card .page .face.front {
z-index: 1;
-webkit-backface-visibility: hidden;
}
#card .page .face.back {
-webkit-transform: rotateY(180deg) translateX(-420px);
}
</style>
</head>
<body>
<div id='main'>
<div id='card'>
<div class='page draggable'>
<div class='face front'>
<img src='front.jpg'/>
</div>
<div class='face back'>
<img src='back.jpg'/>
</div>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script>
function rotate() {
$('.page').css("-webkit-transform", "rotate3d(0, -1, 0, 60deg)");
$('.page').mousedown(function(event) {
console.log(event.layerX);
});
}
$(document).ready(function() {
rotate();
});
</script>
</body>
</html>