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.