pelicin › web › CSS

Transform Function

The tranform function data type represents a transformation (e.g. rotation, scaling, skewings) to an element.

The origin point for transformation(s) can be set by the transform-origin property.

Types of Transform Function

Rotation

rotate(a)

Rotates the element around the transform-origin on the 2D plane as far as a (clockwise).

div {
  transform: rotate(120deg);
}

rotate3d(x, y, z, a)

Rotates an element around a fixed axis in 3D space as far as a (clockwise).

The axis of rotation is the vector that passes through transform-origin and the [x, y, z] vector.

div {
  transform: rotate3d(1, -2, 0, 120deg);
}

rotateX(a)

Rotates around the x-axis, equivalent to rotate3d(1, 0, 0, a).

rotateY(a)

Rotates around the y-axis, equivalent to rotate3d(0, 1, 0, a).

rotateZ(a)

Rotates around the z-axis, equivalent to rotate3d(0, 0, 1, a).

Scaling

scale(sx, sy)

Scales an element up or down on the 2D plane.

scale3d(sx, sy, sz)

Scales an element up or down in 3D space.

scaleX(sx)

Scales an element along the x-axis, equivalent to scale3d(sx, 1, 1).

scaleY(sy)

Scales an element along the y-axis, equivalent to scale3d(1, sy, 1).

scaleZ(sz)

Scales an element along the z-axis, equivalent to scale3d(1, 1, sz).

Skewing

skew(ax, ay)

Skews an element on the 2D plane, ax and ay are in degrees. (Value of 90º will skew the image infinitely.)

skewX(ax)

Equivalent to skewX(ax, 0).

skewY(ay)

Equivalent to skewY(0, ay).

Translation

translate(tx, ty)

Translates an element on the 2D plane. You can specify a length or a percentage for the tx and ty values.

(Percentage values will be relative to the width/height of the reference box defined by the transform-box property.)

translate3d(tx, ty, tz)

Translates an element in 3D space. You can specify a length or a percentage for the tx and ty values, but tz must be in length.

translateX(tx)

Equivalent to translate3d(tx, 0, 0).

translateY(ty)

Equivalent to translate3d(0, ty, 0).

translateZ(tz)

Equivalent to translate3d(0, 0, tz).

Perspective

perspective(d)

Sets the distance between the user and the z = 0 plane.

This is applied to the element itself, unlike perspective and perspective-origin properties which are attached to the container (parent) of elements being transformed in 3D space.

div {
  transform: perspective(800px);
}

Matrix Transformation

matrix(...)

Defines a homogeneous 2D transformation matrix:

T=[actxbdty001] T = \begin{bmatrix} a & c & t_x \\ b & d & t_y \\ 0 & 0 & 1 \\ \end{bmatrix}

Specify the following 6 values in order: a, b, c, d, tx, ty (unitless), where:

  • a, b, c, d represent the linear transformation (scaling and skewing),
  • tx, ty represent the translation.

matrix3d(...)

Defines a 3D transformation as a 4×4 homogeneous matrix:

T=[a1b1c1d1a2b2c2d2a3b3c3d3a4b4c4d4] T = \begin{bmatrix} a_1 & b_1 & c_1 & d_1 \\ a_2 & b_2 & c_2 & d_2 \\ a_3 & b_3 & c_3 & d_3 \\ a_4 & b_4 & c_4 & d_4 \\ \end{bmatrix}

Specify the following 16 values in order: a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 (unitless), where:

  • a1, b1, c1, d1, ..., a3, b3, c3, d3 represent the linear transformation (scaling and skewing),
  • a4, b4, c4, d4 represent the translation.

See Also

References