transform-function

Matrix()

matrix(a, b, c, d, tx, ty)

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

Perspective

perspective()Sets the distance between the user and the z=0 plane.

Rotation

.rotated {
  transform: rotate(45deg); 
  }

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.

The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

rotate()Rotates an element around a fixed point on the 2D plane.rotate3d()Rotates an element around a fixed axis in 3D space.rotateX()Rotates an element around the horizontal axis.rotateY()Rotates an element around the vertical axis.rotateZ()Rotates an element around the z-axis.

Scaling (resizing)

scale()Scales an element up or down on the 2D plane.scale3d()Scales an element up or down in 3D space.scaleX()Scales an element up or down horizontally.scaleY()Scales an element up or down vertically.scaleZ()Scales an element up or down along the z-axis.

Skewing (distortion)

skew()Skews an element on the 2D plane.skewX()Skews an element in the horizontal direction.skewY()Skews an element in the vertical direction.

Translation (moving)

translate()Translates an element on the 2D plane.

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.

translate3d()Translates an element in 3D space.translateX()Translates an element horizontally.translateY()Translates an element vertically.translateZ()Translates an element along the z-axis.