A tiny (900 bytes minified, 470 bytes gziped), functional CSS3 translation transforms API for JavaScript. Supports all browsers supporting CSS3 Transforms. Check out the support grid.

3D transforms - translate.z and translate.d3 - have a separate support grid.

git clone https://github.com/mattcg/css3-translate.git
cd css3-translate/
make
cp build/translate.min.js /path/to/my-project/js/

Alternatively, use Component, Bower or npm to install to your project as a dependency.

For all translation methods, if a length does not include units, px will be used.

Apply a translate(tx, ty) CSS transform to the given element, moving the position of the element on the plane.

If missing, ty is assumed to be equal to tx: translate(el, 2) means translate(el, 2, 2).

Apply a translateX(tx) CSS transform to the given element, moving the element horizontally on the plane.

Apply a translateY(ty) CSS transform to the given element, moving the element vertically on the plane.

Apply a translateZ(tz) CSS transform to the given element, moving the element along the z-axis of the 3D space.

Apply a translate3d(tx, ty, tz) CSS transform to the given element, moving the position of the element in the 3D space.

Get the browser-specific transform rule e.g. 'webkitTransform' or 'transform'.

Copyright © 2013 Matthew Caruana Galizia, licensed under an MIT license.