Crocodoc 3D Demo #3

page-affine.js

function Page($el) {
    // we need a new variable to determine if we should use
    // 3d or 2d mode
    var affine = !browserSupports3dTransforms();

    /* ... */

    // small changes to updateLayers and applyTransform
    updateLayers = function () {
        // detect if the page is flipped backwards
        var flipped = (Math.abs(rotation.x) > 90 && Math.abs(rotation.x) < 270) ||
                      (Math.abs(rotation.y) > 90 && Math.abs(rotation.y) < 270);
        $.each($layers, function (i) {
            var $layer = $(this);
            if (affine) {
                // if the affine mode is flipped backwards, make sure the z-index is correct
                if (flipped) $layer.css('z-index', $layers.length - i);
                else $layer.css('z-index', i);
            }
            applyTransform($layer);
        });
    };

    applyTransform = function ($layer) {
        var z = exploded ? $layer.index() * LAYER_SPACING : 0;
        var matrix = rotationMatrix.translate(0, 0, z);
        // use the affine version if applicable
        $layer.css('transform', affine ? toAffineString(matrix) : matrix.toString());
    };
}

function browserSupports3dTransforms() {
    // going to cheat for the sake of brevity, but you should really use
    // feature detection like Modernizr or simply
    // something like this: https://gist.github.com/webinista/3626934
    return /MSIE\s+9/i.test(navigator.userAgent),
}


// CSSMatrix.toString will return the full 3d string if any 3d transforms have been applied
// this function is used to generate the matrix(a,b,c,d,e,f) string for affine mode
function toAffineString(m) {
    var fix6 = function (val) { return val.toFixed(6); };
    return  'matrix(' + [
            m.a, m.b,
            m.c, m.d,
            m.e, m.f
        ].map(fix6).join(', ') + ')';
}