Recepción de datos de eventos de mouse transformados de objetos DOM con una transformación CSS 3D

¿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>

Fuente

2011-03-08 Nolsto

Parece que usted está buscando la propiedad eventoffsetX. Quizás tenga que crear oyentes para cada .face para identificar los eventos, porque el offsetX se calcula según el target que desencadena el evento. o tal vez quiera las coordenadas para iniciar desde 0 a la izquierda al ancho * 2 a la derecha, entonces se podría utilizar el layerX y el original width de sus elementos:

console.log((event.layerX<0?width-event.offsetX:width+event.offsetX));

Utilizando el offsetX/offsetY no funciona importa qué transformador uses (al menos en los muchos escenarios que he probado)

Fuente

2011-05-24 05:07:42 tog000

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

Recepción de datos de eventos de mouse transformados de objetos DOM con una transformación CSS 3D

Respuesta

Cuestiones relacionadas