1 The scale factor, where 1 stands for the original size, 2 for twice the size, and so on. The element is both scaled horizontally (x-axis) and vertically (y-axis) by the same factor. Negative values mirror the element.
2Optional. The vertical scale factor. If given the factor noted at 1 stands for the horizontal change. In this case the element gets scaled by the factor 2 horizontally and 1.5 vertically.
1 The element is tilted around the x-axis (horizontally) by 30 degrees. Positive values represent a tilt to left, negative values tilt the element to the right.
2Optional. The angle for the tilt around the y-axis (vertical). If given the value at 1 represents the angle for a tilt around the x-axis. Positive values tilt the element downwards, negative values represent a tilt to the top. In this case the element gets tilted by 30 degrees horizontally (to the left) and 10 degrees vertically (downwards).
1 The element is moved 100px to the right. Negative values represent a shift to the left.
2Optional. The vertical shift. If given the value at 1 stands for the horizontal movement. Positive values move the elements downwards, negative values shift it upwards. In this case the element is moved 100px to the right and 20px down.
1 The horizontal position of the origin for transformations (x-axis). May also be a percentage value where 0% stands for left, 50% for center and 100% for right. Between values are possible as well as length values with the reference point at the top left corner. Negative values are possible in each case. By default the origin of the transformation is both horizontally and vertically at the center of the element (50%50%).
2Optional. The vertical position of the origin. 0% stands for top, 100% for right. The rest from 1 also applies here.
x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.