├── .gitignore
├── component.json
├── package.json
├── index.js
└── Readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "matrix-to-css",
 3 |   "repo": "charlottegore/matrix-to-css",
 4 |   "description": "Converts gl-matrix mat4 objects into css transform: matrix3d strings",
 5 |   "version": "1.0.2",
 6 |   "keywords": [],
 7 |   "dependencies": {
 8 |   },
 9 |   "development": {},
10 |   "license": "MIT",
11 |   "main": "index.js",
12 |   "scripts": [
13 |     "index.js"
14 |   ],
15 |   "remotes": [
16 |     "https://raw.githubusercontent.com"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "matrix-to-css",
 3 |   "version": "1.0.4",
 4 |   "description": "Converts gl-matrix mat4 objects into css matrix3d transform strings",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "http://github.com/charlottegore/matrix-to-css"
12 |   },
13 |   "keywords": [
14 |     "matrix3d",
15 |     "css",
16 |     "transform",
17 |     "gl-matrix",
18 |     "animation",
19 |     "gpu-acceleration"
20 |   ],
21 |   "author": "Charlotte Gore <charlotte@greenmesa.co.uk>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/charlottegore/matrix-to-css/issues"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 |    Converts gl-matrix mat4 objects into strings that can be applied as matrix3d transforms.
 4 | 
 5 |    Usage:
 6 | 
 7 |    var mat4 = require('gl-matrix').mat4;
 8 |    var matrixToCSS = require('matrix-to-css');
 9 | 
10 |    var translationMatrix = ... // make your translation matrix.. 
11 | 
12 |    $('#moving-thing').css({
13 |       'transform' : matrixToCSS(translationMatrix);
14 |    });
15 | 
16 | */
17 | 
18 | function generateCSSString(matrix ){
19 |    var str = '';
20 |    str += matrix[0].toFixed(20) + ',';
21 |    str += matrix[1].toFixed(20) + ',';
22 |    str += matrix[2].toFixed(20) + ',';
23 |    str += matrix[3].toFixed(20) + ',';
24 |    str += matrix[4].toFixed(20) + ',';
25 |    str += matrix[5].toFixed(20) + ',';
26 |    str += matrix[6].toFixed(20) + ',';
27 |    str += matrix[7].toFixed(20) + ',';
28 |    str += matrix[8].toFixed(20) + ',';
29 |    str += matrix[9].toFixed(20) + ',';
30 |    str += matrix[10].toFixed(20) + ',';
31 |    str += matrix[11].toFixed(20) + ',';
32 |    str += matrix[12].toFixed(20) + ',';
33 |    str += matrix[13].toFixed(20) + ',';
34 |    str += matrix[14].toFixed(20) + ',';
35 |    str += matrix[15].toFixed(20);
36 | 
37 |    return 'matrix3d(' + str + ')';
38 | 
39 | }
40 | 
41 | module.exports = generateCSSString;


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # Matrix To CSS
 2 | 
 3 |   Converts [gl-matrix(1)](https://www.npmjs.org/package/gl-matrix) mat4 objects into strings that can be applied
 4 |   as values for css `transform` properties on elements.
 5 | 
 6 | ## Why would you want such a thing?
 7 | 
 8 |   Because if you move elements using...
 9 | 
10 |   ```css
11 |     transform: matrix3d( ... )
12 |   ```
13 | 
14 |   Instead of 
15 | 
16 |   ```css
17 |     position: absolute;
18 |     top : 10px;
19 |     left: 10px;
20 |   ```
21 | 
22 |   .. the translation of the element is done entirely in the GPU and the browser does not repaint, meaning you get
23 |   significantly better performance when animating objects.
24 | 
25 | ## Installation
26 | 
27 | Browserify/NPM
28 | 
29 | ```sh
30 |     $ npm install --save matrix-to-css
31 | ```
32 | 
33 | ```js
34 |   var matrixToCSS = require('matrix-to-css');
35 | ```
36 | 
37 | Component
38 | 
39 | ```sh
40 |     $ component install charlottegore/matrix-to-css
41 | ```
42 | 
43 | ```js
44 |   var matrixToCSS = require('matrix-to-css');
45 | ```
46 | 
47 | ## API and Example Usage
48 | 
49 | 
50 | ```js
51 |     // dependencies..
52 |     var mat4 = require('gl-matrix').mat4;
53 |     var vec3 = require('gl-matrix').vec3;
54 |     var matrixToCSS = require('matrix-to-css');
55 | 
56 |     // create a mat4 to be out translation matrix
57 |     var translationMatrix = mat4.create();
58 | 
59 |     // we need an origin matrix, so create another identity matrix..
60 |     var origin = mat4.create();
61 | 
62 |     // we need a translation vector
63 |     var translationVector = vec3.fromValues(10, 10, 0);
64 | 
65 |     // apply the translation to the matrix
66 |     mat4.translate(translationMatrix, origin, translationVector);
67 | 
68 |     // did you know jQuery will automatically find the right 'transform' for you?
69 |     $('#my-element').css('transform', matrixToCSS(translationMatrix));
70 | ```
71 | 
72 | That's basically it. It assumes you can make your own matrix using the gl-matrix library.
73 | 
74 | ## License
75 | 
76 |   MIT
77 | 


--------------------------------------------------------------------------------