XCSSMatrix

The XCSSMatrix class is intended to bring the functionality from WebKitCSSMatrix to other browsers, and NodeJS. The CSSMatrix interface was defined in the CSS 2D Transforms and CSS 3D Transforms Module specifications.

Browser Support

Chrome 6+, Safari 5+, FF4+, Opera 11+, IE9+

Getting started

nodejs

npm install xcssmatrix
var XCSSMatrix = require('xcssmatrix')

Browser

See the examples in the dist directory

via require.js

 <script src="http://requirejs.org/docs/release/2.1.0/minified/require.js"></script>
 <script>
   require(['XCSSMatrix'], function(XCSSMatrix) {
     // use XCSSMatrix
   });
 </script>

via browserify

 <script src="XCSSMatrix.js"></script>
 <script>
   var m3d = new XCSSMatrix('rotateY(1rad) translate3d(23px, 34px, 45px)');
 </script>

Usage

// create a new Matrix
> var matrix = new XCSSMatrix('translate(12px) rotateX(34deg) rotateY(45rad) skew(67deg)')
undefined
> matrix.toString()
'matrix3d(0.525322, 0.475819, -0.705431, 0.000000, 1.237581, 1.949997, -1.102698, 0.000000, 0.850904, -0.293756, 0.435512, 0.000000, 12.000000, 0.000000, 0.000000, 1.000000)'
// matrix operations aren't destructive
> var originalCSS = matrix.toString()
> matrix.rotate(90)
> matrix.toString() === originalCSS
true
// assign the result to the itself to update the matrix
> matrix = matrix.rotate(90)
> matrix.toString() === originalCSS
false

Tests

Its API is intended to match the spec. The tests have been copied from the WebKitCSSMatrix tests for 2D and 3D.

The implementation was largely copied from Firmin's FirminCSSMatrix object.

At the moment, it does not throw errors, which is (was) against the spec. See issue #1 for more.

Please create tickets(and/or tests) for any failing cases.