jquery 3d in webkit

jquery 3d in webkit

// Some simple webkit 3d extensions to jQuery
// Use safari 5 to view.
// (you need to set the -webkit-perspective CSS property to something on the element containing #myNiceDiv for this to work)
// Example use:

// Rotate a div on Y an Z axis:
// $("#myNiceDiv").rotate(0, 30, 10);

// Move the div closer to the camera 
// $("#myNiceDiv").translate(0, 0, 100); 


jQuery.fn.transformCSS = function(matrixTransformFunction, callback) {

    for (var i = 0; i < this.length; i++) {
        var element = this.get(i);

        var theTransform = window.getComputedStyle(element).webkitTransform;

        if (theTransform != "none") {
            // The WebKitCSSMatrix contructor will fail if it's fed matrixes with
            // exponential floats, so we parse them and round them down to seven decimals

            var matrixFunction = "matrix";
            if (theTransform.substring(0, 8) == "matrix3d")
                matrixFunction = "matrix3d";
                
            var values = theTransform.replace(matrixFunction + "(", "").replace(")", "").split(",");
            for (var x = 0; x < values.length; x++) {
                var f = parseFloat(values[x]);
                values[x] = Math.round(f * 1000000) / 1000000;
            }
            theTransform = matrixFunction + "(" + values.join(",") + ")";
        }


        var matrix = new WebKitCSSMatrix(theTransform);
        element.style.webkitTransform = matrixTransformFunction(matrix);


    }

    // Unbind so that chained calls don't mess stuff up
    this.bind("webkitTransitionEnd", function(event) { jQuery(event.currentTarget).unbind("webkitTransitionEnd"); });

    if (callback != null) {
        this.bind('webkitTransitionEnd', callback);
    }
}

jQuery.fn.translate = function(x, y, z, callback) {
    var translate = function(matrix) { return matrix.translate(x, y, z); };
    this.transformCSS(translate, callback);
};

jQuery.fn.rotate = function(x, y, z, callback) {
    var translate = function(matrix) { return matrix.rotate(x, y, z); };
    this.transformCSS(translate, callback);
};