Skip to content

Latest commit

 

History

History
77 lines (58 loc) · 2.8 KB

README.md

File metadata and controls

77 lines (58 loc) · 2.8 KB
Raw

Distort.js

Library to generate complex matrixes to be used with CSS3 transforms. You can individually set/adjust/animate each of the four points of an element. Supports AMD.

Build Status Coverage Status Codacy Badge Dev Dependencies Release

Bower

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

bower install distort --save

Basic Usage

    // Height and Width are need to calcuate matrix
    var distort = new Distort({
        width: 100, // Required
        height: 100, // Required

        // Or

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

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

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

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

    // Optionally check if the matrix was successfully calculated
    if(distort.isValid) {

        // Using jQuery for convenience
        $('#image').css({
            'transform' : distort.toString()
        });
    }

Examples

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.

License

Distort is open-sourced software licensed under the MIT license

Release Historty

  • v1.0.2-alpha - Refactoring
  • v1.0.1-alpha - Minor bug fixes
  • v1.0.0-alpha - Initial Release