¿Hay actualmente algún dato en un evento de mouse javascript que me permita encontrar o calcular fácilmente una posición del mouse relativa al espacio 3D de un elemento transformado?Recepción de datos de eventos de mouse transformados de objetos DOM con una transformación CSS 3D
Para ilustrar visualmente,
A la izquierda está la div sin una matriz 3D, a la derecha está la div después de la transformación 3D.
o
es el origen del evento de ratón
+
/|
/|
+-----+ + |
| | | |
| o| => | o|
| | | |
+-----+ + |
\ |
\|
+
En el guión a continuación, al hacer clic los mismos píxeles en la div informará de un event.layerX
que está en el espacio de transformación 2d del documento/pantalla.
Soy consciente, pero no me entusiasma la perspectiva de analizar el matrix3d de div y usar eso para multiplicarlo a la posición del evento para descubrir esto, sin embargo en la implementación real, los divs tendrán transformaciones más complejas y esto necesitaría para que se haga en cada cuadro de más de un objeto y me preocupo por la sobrecarga que traería ... Sin duda no me importaría ayudar con eso si es mi única opción.
<!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>
offsetX y offsetY son definitivamente una solución viable. Parece que tu ejemplo de capa funcionaría para una rotación a lo largo de un eje, pero se rompería con más. Dio una bofetada a algunos oyentes en la cara anterior y posterior, y curiosamente, una cara con '-webkit-backface-visibility' establecida en' hidden' no registra mousedowns. – Nolsto
¿Alguna idea de cómo obtener la misma cantidad offsetX, pretransformación, para eventos táctiles? No parece existir allí. – tremby