CSS Transform functions with an example of some functions

These functions are used when the <transform-function> CSS data type is used as a value of transform.

matrix()Describes a homogeneous 2D transformation matrix.

Example matrix():

The values represent the following functions:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

<div>Normal</div>
<div class="changed">Changed</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

matrix3d()Describes a 3D transformation as a 4×4 homogeneous matrix.

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

rotate()Rotates an element around a fixed point on the 2D plane.

Example rotate():

The amount of rotation created by rotate() is specified by an <angle>. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

<div>Normal</div>
<div class="rotated">Rotated</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

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.

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

Example scale():

Scaling the X and Y dimensions together

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

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.

skew()Skews an element on the 2D plane.

skewx()Skews an element in the horizontal direction.

skewy()Skews an element in the vertical direction.

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

translate3d()Translates an element in 3D space.

Example translate3d()

This transformation is characterized by a three-dimensional vector. Its coordinates define how much the element moves in each direction.

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

translatex()Translates an element horizontally.

translatey()Translates an element vertically.

translatez()Translates an element along the z-axis.