javascript - 如何在 javascript 中制作图像脸鼠标？

Question

我正在尝试使用 javascript 使图像面向用户的鼠标，我很接近，但我的计算有点偏差(x 轴上的旋转似乎是倒转的)。我基于此链接的代码:rotate3d shorthand

JavaScript:

$(document).mousemove(function(e){
   pageheight = $(document).height();
   pagewidth = $(document).width();
   widthpercentage = e.pageX / pagewidth;
   heightpercentage = e.pageY / pageheight;
   specialW = (widthpercentage * 180 - 90);
   specialH = (heightpercentage * 180 - 90);

   function toRadians(degrees) {
     radians = degrees * (Math.PI /180);
     return radians;
    }

   function matrix(x, y, z, rads) {
    var sc = Math.sin(rads / 2) * Math.cos(rads / 2);
    var sq = Math.pow(Math.sin(rads / 2), 2);

    var array = [];
    var a1 = 1 - 2 * (Math.pow(y, 2) + Math.pow(z, 2)) * sq,
        a2 = 2 * (x * y * sq - z * sc),
        a3 = 2 * (x * z * sq + y * sc),
        a4 = 0,
        b1 = 2 * (x * y * sq + z * sc),
        b2 = 1 - 2 * (Math.pow(x, 2) + Math.pow(z, 2)) * sq,
        b3 = 2 * (y * z * sq - x * sc),
        b4 = 0,
        c1 = 2 * (x * z * sq - y * sc),
        c2 = 2 * (y * z * sq + x * sc),
        c3 = 1 - 2 * (Math.pow(x, 2) + Math.pow(y, 2)) * sq,
        c4 = 0,
        d1 = 0,
        d2 = 0,
        d3 = 0,
        d4 = 1;
      array.push(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
        return array;
        }

        xmatrix = matrix(1, 0, 0, toRadians(specialH));
        ymatrix = matrix(0, 1, 0, toRadians(specialW));

        function multiply(xarray, yarray) {
            var newarray = [];
            var a1 = (xarray[0] * yarray[0]) + (xarray[4] * yarray[1]) + (xarray[8] * yarray[2]) + (xarray[12] * yarray[3]),
                a2 = (xarray[0] * yarray[4]) + (xarray[4] * yarray[5]) + (xarray[8] * yarray[6]) + (xarray[12] * yarray[7]),
                a3 = (xarray[0] * yarray[8]) + (xarray[4] * yarray[9]) + (xarray[8] * yarray[10]) + (xarray[12] * yarray[11]),
                a4 = (xarray[0] * yarray[12]) + (xarray[4] * yarray[13]) + (xarray[8] * yarray[14]) + (xarray[12] * yarray[15]),
                b1 = (xarray[1] * yarray[0]) + (xarray[5] * yarray[1]) + (xarray[9] * yarray[2]) + (xarray[13] * yarray[3]),
                b2 = (xarray[1] * yarray[4]) + (xarray[5] * yarray[5]) + (xarray[9] * yarray[6]) + (xarray[13] * yarray[7]),
                b3 = (xarray[1] * yarray[8]) + (xarray[5] * yarray[9]) + (xarray[9] * yarray[10]) + (xarray[13] * yarray[11]),
                b4 = (xarray[1] * yarray[12]) + (xarray[5] * yarray[13]) + (xarray[9] * yarray[14]) + (xarray[13] * yarray[15]),
                c1 = (xarray[2] * yarray[0]) + (xarray[6] * yarray[1]) + (xarray[10] * yarray[2]) + (xarray[14] * yarray[3]),
                c2 = (xarray[2] * yarray[4]) + (xarray[6] * yarray[5]) + (xarray[10] * yarray[6]) + (xarray[14] * yarray[7]),
                c3 = (xarray[2] * yarray[8]) + (xarray[6] * yarray[9]) + (xarray[10] * yarray[10]) + (xarray[14] * yarray[11]),
                c4 = (xarray[2] * yarray[12]) + (xarray[6] * yarray[13]) + (xarray[10] * yarray[14]) + (xarray[14] * yarray[15]),
                d1 = (xarray[3] * yarray[0]) + (xarray[7] * yarray[1]) + (xarray[11] * yarray[2]) + (xarray[15] * yarray[3]),
                d2 = (xarray[3] * yarray[4]) + (xarray[7] * yarray[5]) + (xarray[11] * yarray[6]) + (xarray[15] * yarray[7]),
                d3 = (xarray[3] * yarray[8]) + (xarray[7] * yarray[9]) + (xarray[11] * yarray[10]) + (xarray[15] * yarray[11]),
                d4 = (xarray[3] * yarray[12]) + (xarray[7] * yarray[13]) + (xarray[11] * yarray[14]) + (xarray[15] * yarray[15]);

        newarray.push(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
        return newarray;
        }
        var newmatrix  = multiply(xmatrix, ymatrix);

        $('#page1 img').css('transform', 'matrix3d(' + newmatrix[0] + ','  + newmatrix[1] + ',' + newmatrix[2] + ',' + newmatrix[3] + ',' + newmatrix[4] + ',' + newmatrix[5] + ',' + newmatrix[6] + ',' + newmatrix[7] + ',' + newmatrix[8] + ',' + newmatrix[9] + ',' + newmatrix[10] + ',' + newmatrix[11] + ',' + newmatrix[12] + ',' + newmatrix[13] + ',' + newmatrix[14] + ',' + newmatrix[15] + ')');
});

我知道这是很多代码，但如果我能得到第二个意见，我将不胜感激。谢谢

请不要使用插件。

Answer 1

我实际上只是编辑了 matrix() 函数并在 array.push 之前添加了这个:

if ( y = 1 ) {
    a3 = a3 * -1;
    c1 = c1 * -1;
}

这解决了问题。