Ricezione di dati di eventi del mouse trasformati da oggetti DOM con una trasformazione CSS 3D

Attualmente sono presenti dati in un evento di mouse javascript che mi consentono di trovare o calcolare facilmente una posizione del mouse relativa allo spazio 3D di un elemento trasformato?Ricezione di dati di eventi del mouse trasformati da oggetti DOM con una trasformazione CSS 3D

Per illustrare visivamente,
A sinistra è il div senza una matrice 3d, a destra è il div dopo la trasformazione 3d.
o è l'origine della manifestazione del mouse

   + 
       /| 
      /| 
+-----+  + | 
|  |  | | 
| o| => | o| 
|  |  | | 
+-----+  + | 
       \ | 
       \| 
       +

Nello script qui sotto, cliccando gli stessi pixel nella div segnalerà un event.layerX, che è nello spazio trasformazione 2d del documento/schermo.

Sono consapevole, ma non entusiasta della prospettiva di analizzare la matrice div divisa e di utilizzarla per moltiplicare la posizione dell'evento per scoprirlo, tuttavia nella reale implementazione, le div avranno trasformazioni più complesse e ciò richiederebbe da fare su ogni fotogramma per più di un oggetto e mi preoccupo per il sovraccarico che porterebbe ... Certamente non mi dispiacerebbe aiutare con quello se è la mia unica opzione però.

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

fonte

2011-03-08 Nolsto

Sembra che si sta cercando per il offsetX immobile event. Forse dovresti creare listener per ogni .face per identificare gli eventi, perché lo offsetX viene calcolato in base allo target che attiva l'evento. o forse si desidera le coordinate per iniziare da 0 a sinistra alla larghezza * 2 sulla destra, allora si potrebbe utilizzare il layerX e l'originale width dei vostri elementi:

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

Utilizzando l'offsetX/offsetY non funziona importa quale trasformazione usi (almeno nei molti scenari che ho provato)

fonte

2011-05-24 05:07:42 tog000

offsetX e offsetY sono sicuramente una soluzione praticabile. Sembra che il tuo esempio di livello funzionerebbe per una rotazione lungo un asse, ma si interromperà con altri. Ho schiaffeggiato alcuni ascoltatori sulla facciata anteriore e posteriore, e stranamente, una faccia con '-webkit-backface-visibility' impostata su' hidden' non registra i mousedowns. – Nolsto

Qualche idea su come ottenere la stessa quantità offset, pre-trasformazione, per gli eventi tattili? Non sembra esistere lì. – tremby

Ricezione di dati di eventi del mouse trasformati da oggetti DOM con una trasformazione CSS 3D

risposta

Problemi correlati