javascript - 将鼠标位置映射到对象的变换

Question

我有一个对象，我们称之为它

<div class="myObject">foo</div>

这显然位于 body 标记内。

我像这样变换所述对象:

transform: perspective( 2000px ) rotateY( -15deg) rotateX( 15deg );

我还像这样跟踪 mousemove 上的鼠标位置:

var pageX = event.pageX;
var pageY = event.pageY;

现在我想将光标的坐标映射到-15到+15，而body“0”代表-15，body“maxwidth”代表+15。

我不能只将鼠标位置映射到值，因为这样我就失去了关系。

我该怎么做？当光标位于窗口中心时，两个值都应为 0。

谢谢!

Answer 1

我明白了，感谢这篇文章:

https://gist.github.com/AugustMiller/85b54d49493bb71ba81e

            var pageX = event.pageX;
            var pageY = event.pageY;

            //console.log(pageX);
            //console.log(pageY);

            var numX = 0;
            var numY = 0;

            var bodyX = $('body').width();
            var bodyY = $('body').height();



            var rotX = (((pageX - bodyX) / (-15 - bodyX)) * -30)+15;
            var rotY = (((pageY - bodyY) / (-15 - bodyY)) * -30)+15;


            console.log('x: '+rotX);
            console.log('y: '+rotY);