CSS Transforms in Firefox (Gecko)

Keith Schwarz posted about CSS transform support in Firefox thanks to the new -moz-transform, based on Webkit CSS transforms. This function simply moves elements around by the specified offset. For example, a text element with -moz-transform: translate(100px); will appear 100 pixels downward and to the right of where it normally would have been displayed. Of course, […]

Keith Schwarz posted about CSS transform support in Firefox thanks to the new -moz-transform, based on Webkit CSS transforms.

This function simply moves elements around by the specified offset. For example, a text element with -moz-transform: translate(100px); will appear 100 pixels downward and to the right of where it normally would have been displayed. Of course, there are more functions than just translate. For example, there’s rotate, which lets you rotate an element by a specified number of degrees; scale, which scales elements by arbitrary dimensions along each axis; skew, which performs skews along the X and Y axes; and matrix, for arbitrary matrix transformations. There are also simple versions of these like skewx and scaley which allow for simpler syntax in some cases.

-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */ -moz-transform: translate(30px); /* Move down and right 30 pixels */ -moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */

Full Article

Source:→ Ajaxian