diTii.com | D' Technology Weblog

Using WebKit CSS transforms, a boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:

• scale, scaleX, scaleY - Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
• rotate - Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
• translate, translateX, translateY - Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
• skew, skewX, skewY - Skew an object. These functions take CSS angles.
• matrix - Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

Pages: 1 2