Polyfill for CSSMatrix / WebKitCSSMatrix
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
doc
lib
node_modules/.bin
test
.jshintrc
.travis.yml
README.md
grunt.js
index.js
package.json

README.md

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+

'Test results'

Getting started

nodejs

build status

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.

Bitdeli Badge