Giter Club home page Giter Club logo

perspectivetransform.js's Introduction

PerspectiveTransform#

This is an extremely useful class for advanced CSS 3d animation. You can set the x, y point of the corners of a DOM element and do need to think about the complicated Matrix formula behind it.

alt text

Usage

    // create PerspectiveTransfrom
    var transform = new PerspectiveTransform(elem, width, height, useBackFacing);

    // the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight"
    transform.bottomRight.x = 200;
    transform.bottomRight.y = 200;

    // check the polygon error before updating
    if(transform.checkError()==0){
        transform.update(); // update the perspective transform
        elem.style.display = "block"; // show the element
    }else{
        elem.style.display = "none"; // hide the element
    }

Firefox on retina screen fix

PerspectiveTransform.useDPRFix = true; // put true if you need to apply this fix

window.onresize = function(){
    PerspectiveTransform.dpr = window.devicePixelRatio; // update the dpr
    transform.update(); // update the PerspectiveTransform instance
}

Credit

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.

perspectivetransform.js's People

Contributors

bryant1410 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.