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.

Node Transform 2d (gallery-node-transform2d) on cdn

Last Updated: 06/23/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 04/11/12
Last CDN Push: 05/2/12
Build Tag: gallery-2012.05.02-20-10
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

This adds methods to Node that perform CSS transforms. If the transition module is also present, the transforms can be animated.

The following methods are added to Node instances:

getMatrix: Helper method to get the node's current 2d transfom matrix.

inverseTransform: Transforms the node by the inverse of the nodes current 2d transform matrix.

multiplyMatrix: Transforms the node by multiplying the nodes current 2d transform matrix with another matrix.

rotate: Rotates the node clockwise by degrees.

rotateRad: Rotates the node clockwise by radians.

scale: Scales the node horizontally and vertically.

scaleXY: Scales the node horizontally and vertically. The horizontal and vertical scale factors are specified independently.

skewX: Skews the node horizontally by degrees.

skewXRad: Skews the node horizontally by radians.

skewY: Skews the node vertically by degrees.

skewYRad: Skews the node vertically by radians.

transform: Transforms the node by the given matrix.

translate: Translates the node horizontally and vertically.

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.05.02-20-10'
}).use('gallery-node-transform2d', function(Y) {
    var myNode = Y.one('#myNode');
 
    // Rotate 60 degrees, then move 50px along the Y axis.
    myNode.rotate(60).translate(0, 50);
});