I have a surface ( div ) that is transformed into 3d (CSS), that is, given a rotate . Div can be rotated to any angle on any axis. The user is guided to this block and pinches paint, then the mouse goes beyond the transformation area. The result is a line. The first point - pressing, the second - the user pressed LKM. How can I transfer this line to the block coordinate system? This is required in order to understand in which direction the line was drawn. Perhaps a little messy, so I can clarify, if necessary. I would even be grateful for the direction in which to dig.
Upd: I repeat. The problem is that if you track mouse clicks only on a 3d surface, then when you go beyond its limits, events will not occur. Consequently, I have to catch the events of the document or the parent unit, but they are no longer in 3d + transformation at the surface , so it’s not clear where and where the line was drawn from.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #content { width: 100%; height: 100%; background: #eee; } #viewport { width: 500px; height: 500px; -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; -webkit-perspective-origin: center -200px; -moz-perspective-origin: center -200px; -ms-perspective-origin: center -200px; perspective-origin: center -200px; background: #eee; border: 1px solid #aaa; margin: 200px auto; } #viewport .surface { width: 400px; height: 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; border: 5px solid #f00; margin: 20px auto; transform: rotateX(43deg) rotateY(25deg); background: #575; } </style> </head> <body> <div id="content"> <div id="viewport"> <div class="surface"></div> </div> </div> <script> // events... </script> </body> </html> 