General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: scale(1 2, 2 1.5)

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.

Optional. 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.

Horizontal scale

transform: scaleX(1 2)

1 The horizontal scale factor.

Vertical scale

transform: scaleY(1 1.5)

1 The vertical scale factor.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

General description

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: skew(1 30deg, 2 10deg)

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.

Optional. 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).

Horizontal skew

transform: skewX(1 30deg)

1 The angle for the tilt around the x-axis (horizontal).

Vertical skew

transform: skewY(1 10deg)

1 The angle for the tilt around the y-axis (vertical).

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: translate

Is used to move elements. Can also be achived by setting the margin or by positioning the element although translate is the better choice for animating elements.

General description

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: translate(1 100px, 2 20px)

The element is moved 100px to the right. Negative values represent a shift to the left.

Optional. 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.

Horizontal translate

transform: translateX(1 100px)

1 The value for the horizontal shift.

Vertical translate

transform: translateY(1 20px)

1 The value for the vertical shift.

Example

Multiple transformations combined

transform: rotate(1 33deg) scale(2 1.5)

The element is rotated clockwise by 33 degrees.

It is also enlarged 1.5 times simultaneously (no comma prefixed!).

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

General description

transform-origin: 1 left 2 top

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%).

Optional. The vertical position of the origin. 0% stands for top, 100% for right. The rest from 1 also applies here.

Example

One value set

transform-origin: 1 right

1 The origin for transformations is horizontally set to the right side and vertically centered (50%).

Two percentage values set

transform-origin: 1 25% 2 75%

The origin at the x-axis (horizontally) is 25% from the left.

The origin for the y-axis (horizontally) is 75% from above.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).