Monday, September 15th, 2008
We discussed the WebKit CSS transforms that allow you to scale, transform, skew, and do matrix work through simple CSS.
Mozilla has stepped up and Keith Schwarz posted on CSS transform support in Firefox thanks to the new
- -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. */
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.
Posted by Dion Almaer at 9:55 am