Transform

The transform property is used to modify the appearance of an element.

One of the transformations available is the translate function, which moves an element from its current position along the X and/or Y axes.

Syntax:

selector {
  transform: translate(tx, ty);
}

tx: Specifies the translation along the X-axis (horizontal).
ty: Specifies the translation along the Y-axis (vertical).

Example:

.card {
  transform: translate(30px, 40px); /* Moves the element 30 pixels to the right and 40 pixels down */
}

Positive values for "tx" move the element to the right, while negative values move it to the left.
Positive values for "ty" move the element downwards, while negative values move it upwards.
We can use percentage values for relative translations, e.g., translate(30%, 40%).

translateX & translateY:

The "translateX()" and "translateY()" functions are also available for translating along a single axis.

Example:


.card-xAxis {
  transform: translateX(40px); /* Moves the element 40 pixels to the right */
}

.card-yAxis {
  transform: translateY(-30px); /* Moves the element 30 pixels upwards */
}

The translate function is commonly used for various purposes, such as "positioning elements within a layout", "creating animations", and "adjusting element positions" in response to user interactions.

<-- Transition

Pseudo Elements -->