Matrix To CSS

Converts gl-matrix(1) mat4 objects into strings that can be applied as values for css transform properties on elements.

Why would you want such a thing?

Because if you move elements using...

  transform: matrix3d( ... )

Instead of

  position: absolute;
  top : 10px;
  left: 10px;

.. the translation of the element is done entirely in the GPU and the browser does not repaint, meaning you get significantly better performance when animating objects.

Installation

Browserify/NPM

    $ npm install --save matrix-to-css

  var matrixToCSS = require('matrix-to-css');

Component

    $ component install charlottegore/matrix-to-css

  var matrixToCSS = require('matrix-to-css');

API and Example Usage

    // dependencies..
    var mat4 = require('gl-matrix').mat4;
    var vec3 = require('gl-matrix').vec3;
    var matrixToCSS = require('matrix-to-css');
 
    // create a mat4 to be out translation matrix
    var translationMatrix = mat4.create();
 
    // we need an origin matrix, so create another identity matrix..
    var origin = mat4.create();
 
    // we need a translation vector
    var translationVector = vec3.fromValues(10, 10, 0);
 
    // apply the translation to the matrix
    mat4.translate(translationMatrix, origin, translationVector);
 
    // did you know jQuery will automatically find the right 'transform' for you?
    $('#my-element').css('transform', matrixToCSS(translationMatrix));

That's basically it. It assumes you can make your own matrix using the gl-matrix library.

License

MIT