Geek Answers Handbook

Retrieving Transformed Mouse Event Data from DOM Objects Using 3D CSS Transformation

Is there currently any data in the javascript mouse event that will allow me to easily find or calculate the position of the mouse relative to the three-dimensional space of the transformed element?

To illustrate visually,
On the left is a div without a 3d matrix, on the right is a div after a 3d transformation.
o is the start of the mouse event.

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

In the script below, clicking the same pixels in the div will tell event.layerX which is in the 2d transform space of the document / screen.

I know, but I’m not happy with the prospect of parsing a matrix3d ​​div and using it to multiply by the position of the event to find it, however in a real implementation divs will have more complex transformations, and this would have to be done on every frame for several objects and I'm worried about the overhead that will bring ... I, of course, will not mind if this is my only option.

 <!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>
+7
source share
1 answer

It seems that you are looking for the offsetX event property. You may need to create listeners for each .face in order to identify events, because offsetX computed based on the target that fires the event. Or maybe you want the coordinates to start from 0 on the left to width * 2 on the right, then you could use layerX and the original width your elements:

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

Using offsetX / offsetY works no matter what conversion you use (at least in many of the scenarios I tested)

0
source

More articles:


All Articles