Transforms

• 2D transforms (translate, rotate, scale, skew)
• 3D transforms
• Transform-origin property

Transforms in CSS

CSS Transforms allow you to manipulate the visual appearance of elements by moving, rotating, scaling, or skewing them. Transforms can be applied in both 2D and 3D space, providing powerful tools for creating dynamic, visually engaging layouts.

---

1. 2D Transforms

2D transforms are applied on a plane, affecting the positioning, rotation, scaling, or skewing of an element without introducing depth (z-axis).

a. translate

The translate function moves an element from its current position.

• translate(x, y): Moves the element along the x-axis and y-axis.
• translateX(x): Moves the element along the x-axis.
• translateY(y): Moves the element along the y-axis.

Example:

.box {
  transform: translate(
    50px,
    100px
  ); /* Moves the element 50px right and 100px down */
}

b. rotate

The rotate function rotates an element around a fixed point (by default, the center of the element).

• rotate(angle): Rotates the element by the specified angle in degrees (deg) or radians (rad).

Example:

.box {
  transform: rotate(45deg); /* Rotates the element 45 degrees clockwise */
}

c. scale

The scale function resizes an element.

• scale(x, y): Scales the element by x on the horizontal axis and by y on the vertical axis.
• scaleX(x): Scales the element horizontally.
• scaleY(y): Scales the element vertically.

Example:

.box {
  transform: scale(2, 1.5); /* Doubles the width and increases height by 50% */
}

d. skew

The skew function distorts the element by slanting it along the x-axis, y-axis, or both.

• skew(x, y): Skews the element by x degrees along the x-axis and y degrees along the y-axis.
• skewX(x): Skews the element along the x-axis.
• skewY(y): Skews the element along the y-axis.

Example:

.box {
  transform: skew(
    30deg,
    15deg
  ); /* Skews the element 30 degrees along the x-axis and 15 degrees along the y-axis */
}

---

2. 3D Transforms

3D transforms add a third dimension to the transform functions, allowing elements to be manipulated in three-dimensional space.

a. rotateX, rotateY, rotateZ

These functions rotate an element around one of the three axes.

• rotateX(angle): Rotates the element around the x-axis.
• rotateY(angle): Rotates the element around the y-axis.
• rotateZ(angle): Rotates the element around the z-axis (equivalent to rotate in 2D).

Example:

.box {
  transform: rotateX(
    45deg
  ); /* Rotates the element 45 degrees around the x-axis */
}

b. translateZ

The translateZ function moves an element along the z-axis (forward or backward).

• translateZ(z): Moves the element along the z-axis.

Example:

.box {
  transform: translateZ(50px); /* Moves the element 50px closer to the viewer */
}

c. perspective

The perspective function gives a sense of depth by simulating the distance between the viewer and the object.

• perspective(n): Specifies the distance between the viewer and the z=0 plane, giving a sense of 3D depth.

Example:

.container {
  perspective: 800px;
}

• Applying perspective to a parent container affects all child elements, making them appear with depth when transformed in 3D.

d. matrix3d

The matrix3d function is a more complex, low-level way to apply 3D transforms. It takes a 4x4 matrix as an argument, allowing for very fine-grained control over all aspects of 3D transformation.

Example:

.box {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 50, 0, 1);
}

---

3. Transform-Origin Property

The transform-origin property specifies the point around which a transformation is applied. By default, transforms occur around the center of the element, but transform-origin allows you to change that reference point.

a. Basic Syntax

Syntax:

element {
  transform-origin: x-axis y-axis z-axis;
}

• x-axis: The horizontal origin, with values like left, right, center, or a specific length or percentage.
• y-axis: The vertical origin, with values like top, bottom, center, or a specific length or percentage.
• z-axis: The depth origin, used mainly in 3D transforms.

Example:

.box {
  transform-origin: top left;
  transform: rotate(45deg);
}

• This example rotates the element 45 degrees around the top-left corner instead of the center.

b. 3D Transform-Origin

When working with 3D transforms, you can specify a z-axis value to define the depth origin, adding another layer of control.

Example:

.box {
  transform-origin: 50% 50% 50px; /* Center of the element, but 50px outwards on the z-axis */
}

• Here, the element is rotated around a point that is 50px outward from its center, creating a distinct 3D effect.

---