एक सीएसएस 3 डी ट्रांसफॉर्म

के साथ डीओएम ऑब्जेक्ट्स से परिवर्तित माउस इवेंट डेटा प्राप्त करना क्या वर्तमान में जावास्क्रिप्ट माउस इवेंट में कोई डेटा है जो मुझे एक परिवर्तित तत्व की 3 डी स्पेस के सापेक्ष माउस स्थिति को आसानी से ढूंढ या गणना करने की अनुमति देगा?एक सीएसएस 3 डी ट्रांसफॉर्म

दृष्टि से चित्रित करने के लिए,
बाईं ओर 3 डी मैट्रिक्स के बिना div है, दाईं ओर 3 डी रूपांतरण के बाद 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>

स्रोत

2011-03-08 Nolsto

ऐसा लगता है कि आप देख रहे हैं की तरह offsetX संपत्ति event के लिए। शायद आपको घटनाओं की पहचान करने के लिए हर .face को श्रोताओं को बनाना होगा, क्योंकि offsetX की गणना target पर आधारित है जो घटना को आग लगती है। या शायद आप निर्देशांक सही पर 2 चौड़ाई * बाईं तरफ के 0 से शुरू करना चाहते हैं, तो आप layerX और अपने तत्वों का मूल width इस्तेमाल कर सकते हैं:

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

का उपयोग offsetX/offsetY कोई काम करता है इससे कोई फर्क नहीं पड़ता कि आप किस प्रकार का उपयोग करते हैं (कम से कम कई परिदृश्यों में मैंने परीक्षण किया है)

स्रोत

2011-05-24 05:07:42 tog000

ऑफ़सेटएक्स और ऑफ़सेट वाई निश्चित रूप से एक व्यवहार्य समाधान है। ऐसा लगता है कि आपकी परत उदाहरण एक धुरी के साथ घूर्णन के लिए काम करेगा, लेकिन अब और भी टूट जाएगा। कुछ श्रोताओं को सामने और पीछे के चेहरे पर थप्पड़ मार दिया, और विचित्र रूप से, '-webkit-backface-visibility 'के साथ एक चेहरा' छुपा 'पर सेट किया गया है जो mousedowns पंजीकृत नहीं करता है। – Nolsto

किसी भी विचार को स्पर्श घटनाओं के लिए समान ऑफसेटएक्स मात्रा, पूर्व-परिवर्तन कैसे प्राप्त करें? यह वहां मौजूद नहीं दिखता है। – tremby

एक सीएसएस 3 डी ट्रांसफॉर्म

उत्तर

संबंधित मुद्दे