Distort.js v1.0.1-alpha by isuttell

Installation

The easiest way to install and stay up to date with Distort is through Bower:

bower install distort --save

Basic Usage

<script src="bower_components/distort/distort.min.js"></script>

<script>
var distort = new Distort({
    width: 100, // Required
    height: 100, // Required

    // Or

    $el: $('.element'), // Or specify a jQuery element

    // (Optional) Transform Origin - Defaults to center
    offset: {
        x: '50%' || '50px', // Accepts 'px' or '%'
        y: '50%' || '50px',
    }
});

// Relative
distort.topRight.x += 100;
distort.topRight.y += 100;

distort.topLeft.x -= 100;
distort.topLeft.y -= 100;

// Absolute
distort.bottomRight.x = 50;
distort.bottomRight.y = 50;

distort.bottomLeft.x = 0;
distort.bottomLeft.y = 50;

// Cloning
var translateDistort = distort.clone();

// Relative Translate
translateDistort.translateX(10);
translateDistort.translateY(10);

// Relative Scale
var scaleDistort = distort.clone();
scaleDistort.scale(1.1);

// (Optional) Check if the matrix was successfully generated
if(distort.isValid) {
    $('#image').css({
        'transform' : distort.toString()
    });
}
</script>

Examples on Codepen

Credit

Forked from edankwan/PerspectiveTransform.js

The original PerspectiveTransform.js is created by Israel Pastrana http://www.is-real.net/experiments/css3/wonder-webkit/js/real/display/PerspectiveTransform.js

Matrix Libraries from a Java port of JAMA: A Java Matrix Package, http://math.nist.gov/javanumerics/jama/ Developed by Dr Peter Coxhead: http://www.cs.bham.ac.uk/~pxc/ Available here: http://www.cs.bham.ac.uk/~pxc/js/

I simply removed some irrelevant variables and functions and merge everything into a smaller function. I also added some error checking functions and bug fixing things.