Wie mache ich Bild-Face-Maus in Javascript?

Question

Ich versuche Javascript verwenden, um ein Bild die Maus des Benutzers Gesicht, ich bin in der Nähe, aber meine Berechnungen sind ein bisschen aus (die Drehung auf der X-Achse scheint invertiert sein). Ich basierend meinen Code zu diesem Link: 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] + ')'); 
}); 

Ich weiß, dass es eine Menge Code ist, aber wenn ich eine zweite Meinung einer bekommen könnte, wäre es sehr zu schätzen. Danke

Keine Plugins bitte.

Answer 1

I edited eigentlich nur die matrix() Funktion und fügte hinzu, dieses Recht vor array.push:

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

Und dies das Problem behoben.