Bir CSS 3D dönüşümü olan DOM nesnelerinden dönüştürülen fare olayı verilerini alma

Şu anda dönüştürülmüş bir öğenin 3B boşluğuna göre bir fare konumunu kolayca bulmam veya hesaplayabilmem için javascript fare olayında herhangi bir veri var mı?Bir CSS 3D dönüşümü olan DOM nesnelerinden dönüştürülen fare olayı verilerini alma

Görsel olarak göstermek için,
Sol tarafta 3d matris içermeyen div, sağda 3d dönüşümden sonraki div.
o belge/Ekranın 2D dönüşüm uzayda bir event.layerX rapor verecek div aynı pikselleri tıklayarak Aşağıdaki komut dosyasında fare olayı

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

kökeni vardır.

Biliyorum, ama div'in matrix3d'sini ayrıştırma olasılığı hakkında heyecanlanmadım ve bunu gerçekleştirmek için olay konumuna çarpmak için bunu kullanmakla birlikte, gerçek uygulamada, div'ler daha karmaşık dönüşümlere sahip olacak ve bu ihtiyaç duyacaktır. Birden fazla nesne için her bir çerçeve üzerinde yapılması ve getirecek olan ek yük için endişeleniyorum ... Eğer tek seçeneğim olsa, kesinlikle yardım etmem. Eğer offsetX özelliği event aradığınız gibi

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

kaynak

2011-03-08 Nolsto

görünüyor. Belki olayları tanımlamak için her .face öğesine dinleyiciler oluşturmanız gerekir, çünkü offsetX olayları tetikleyen target'a göre hesaplanır. offsetX/offsetY hayır işleri kullanma

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

: Ya da belki o zaman layerX ve elementlerin orijinal width kullanabilirsiniz, koordinatlar sağda * 2 genişlik soldaki 0'dan başlamak istiyorum kullandığınız dönüşümü (en azından test ettiğim birçok senaryoda)

kaynak

2011-05-24 05:07:42 tog000

offsetX ve offsetY kesinlikle uygun bir çözümdür. Katman örneğiniz bir eksen boyunca bir rotasyon için çalışacak gibi görünüyor, ancak artık daha fazla parçalanacaktı. Ön taraftaki ve arka yüzdeki bazı dinleyicileri tokatladı ve garip bir yüzü olan 'gizli' olarak ayarlanmış olan -webkit-backface-görünebilirlik ', mousedown'ları kaydetmiyor. – Nolsto

Dokunma olayları için aynı offsetX miktarını, dönüşümü nasıl alacağınıza dair bir fikriniz var mı? Orada görünmüyor. – tremby

Bir CSS 3D dönüşümü olan DOM nesnelerinden dönüştürülen fare olayı verilerini alma

cevap

İlgili konular