Cross-browser, spec compliant, XCSSMatrix shim.

npm install xcssmatrix
10 downloads in the last week
21 downloads in the last month


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+

'Test results'

Getting started


build status

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


See the examples in the dist directory

via require.js

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

via browserify

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


// create a new Matrix
> var matrix = new XCSSMatrix('translate(12px) rotateX(34deg) rotateY(45rad) skew(67deg)')
> 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
// assign the result to the itself to update the matrix
> matrix = matrix.rotate(90)
> matrix.toString() === originalCSS


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.

npm loves you