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.
Chrome 6+, Safari 5+, FF4+, Opera 11+, IE9+
npm install xcssmatrix
var XCSSMatrix = require('xcssmatrix')
See the examples in the dist directory
<script src="http://requirejs.org/docs/release/2.1.0/minified/require.js"></script>
<script>
require(['XCSSMatrix'], function(XCSSMatrix) {
// use XCSSMatrix
});
</script>
<script src="XCSSMatrix.js"></script>
<script>
var m3d = new XCSSMatrix('rotateY(1rad) translate3d(23px, 34px, 45px)');
</script>
// 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
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.
