Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

CSSMatrix2d (gallery-cssmatrix2d) on cdn

Last Updated: 06/21/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 04/10/12
Last CDN Push: 04/12/12
Build Tag: gallery-2012.04.12-13-50
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

This represents the matrix used by 2d CSS transforms. It helps perform all of the necessary matrix calculations. This is sort of an implementation of the CSSMatrix object defined in this spec: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface The matrix defined in the spec is a 3x2 matrix. I'm not exactly an expert at matrix math, but most of the operations required by the spec only work with square matrices. The spec doesn't explain how a 3x2 matrix is supposed to do these things. In order to make the math work correctly, this object internally treats it as the 4x4 matrix defined in the 3d CSS transforms spec here: http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface and it converts the 3x2 matrix into a 4x4 matrix by following the examples provided in this spec: http://www.w3.org/TR/2012/WD-css3-transforms-20120403/ Other implementations of these specs, like the WebKitCSSMatrix object and others that have copied it, attempt to combine both the 2d and 3d versions of CSSMatrix into the same object. This implementation only borrows ideas from the 3d version to make the math make sense, but only the 2d functionality is implemented. Since only the 6 2d matrix items out of the total 16 3d matrix items are mutable, and the remaining 3d matrix items are known to be either 0 or 1, most of the complicated 4x4 matrix math is factored down and reduced, becoming much more efficient.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

The matrix values are stored in properties a, b, c, d, e, and f.

These methods perform an operation and return a new matrix object without modifying this one: inverse, multiply, rotate, rotateRad, scale, skewX, skewXRad, skewY, skewYRad, and translate.

The toString method returns a string that can be used to set a CSS transform.
The setMatrixValue method accepts a CSS transform string and updates this matrix object's properties.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.04.12-13-50'
}).use('gallery-cssmatrix2d', 'node', function(Y) {
    var myNode = Y.one('#myNode'),
        myNodeMatrix = new Y.CSSMatrix2d().setMatrixValue(myNode.getStyle('transform'));
 
    // Rotate 60 degrees, then move 50px along the Y axis.
    myNode.setStyle('transform', myNodeMatrix.rotate(60).translate(0, 50).toString());
});