Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including css-quad with all npm packages installed. Try it out:

var cssQuad = require("css-quad")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

css-quad v0.1.1

Css transform quad

Css Quad

Projective transformation of a plane (dom element).

Can be usefull to quickly add perspective to a dom element, or simply to animate a quad for transition purpose.

Based on this original post.
Another nice article can be found here.


npm i css-quad --save


import CssQuad from 'css-quad';

const cssQuad = new CssQuad(domElement);

Run npm i && npm start to build the demo.




Public methods


This method has to be called whenever the dom element size changes.


This method has to be called on RAF.

Getters & setters

p1 = {x,y}

p2 = {x,y}

p3 = {x,y}

p4 = {x,y}

Position of the quad anchors relative to the viewport.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free