Introduction to CSS Transforms

CSS transforms allow you to move, rotate, scale, and skew elements in 2D or 3D space. They provide a powerful way to create dynamic visual effects without affecting the document flow, making them ideal for animations, hover effects, and responsive layouts. Transforms are performed on the visual rendering of an element, not its actual layout space.

The primary property for applying transformations is `transform`. You can apply multiple transform functions to a single element by chaining them.

2D Transform Functions

CSS provides several 2D transform functions to manipulate elements along the X and Y axes.

`translate()`

Moves an element from its current position.

• `translate(x, y)`: Moves along both X and Y axes.
• `translateX(x)`: Moves only along the X-axis.
• `translateY(y)`: Moves only along the Y-axis.

.translate-example {
    transform: translate(50px, 20px); /* Move right 50px, down 20px */
}

.translate-x-example {
    transform: translateX(-30px); /* Move left 30px */
}

`rotate()`

Rotates an element around its `transform-origin` (default is the center).

• `rotate(angle)`: Rotates by the specified angle (e.g., `45deg`, `0.5turn`, `1rad`).

.rotate-example {
    transform: rotate(45deg);
}

`scale()`

Scales an element up or down.

• `scale(x, y)`: Scales along both X and Y axes. If `y` is omitted, it defaults to `x`.
• `scaleX(x)`: Scales only along the X-axis.
• `scaleY(y)`: Scales only along the Y-axis.

.scale-example {
    transform: scale(1.2); /* Scale up by 20% */
}

.scale-xy-example {
    transform: scale(0.8, 1.5); /* Shrink X, stretch Y */
}

`skew()`

Skews an element along the X and Y axes.

• `skew(angleX, angleY)`: Skews along both X and Y axes. If `angleY` is omitted, it defaults to `0`.
• `skewX(angle)`: Skews only along the X-axis.
• `skewY(angle)`: Skews only along the Y-axis.

.skew-example {
    transform: skew(20deg, 10deg);
}

.skew-x-example {
    transform: skewX(-15deg);
}

3D Transform Functions

For more advanced effects, CSS offers 3D transform functions. To enable 3D transformations, you often need to set the `perspective` property on a parent element or the element itself.

`translate3d()` and `translateZ()`

Moves an element in 3D space.

• `translate3d(x, y, z)`: Moves along X, Y, and Z axes.
• `translateZ(z)`: Moves only along the Z-axis (towards/away from the viewer).

`rotate3d()` and `rotateX/Y/Z()`

Rotates an element in 3D space.

• `rotate3d(x, y, z, angle)`: Rotates around a custom 3D vector (x,y,z) by a given angle.
• `rotateX(angle)`: Rotates around the X-axis.
• `rotateY(angle)`: Rotates around the Y-axis.
• `rotateZ(angle)`: Rotates around the Z-axis (same as 2D `rotate()`).

`scale3d()` and `scaleZ()`

Scales an element in 3D space.

• `scale3d(x, y, z)`: Scales along X, Y, and Z axes.
• `scaleZ(z)`: Scales only along the Z-axis.

.perspective-container {
    perspective: 800px; /* Apply perspective to a parent */
}

.rotate-3d-example {
    transform: rotateY(60deg); /* Rotate around Y-axis */
}

.translate-z-example {
    transform: translateZ(100px); /* Move element closer to viewer */
}

`transform-origin` Property

By default, transformations are applied from the center of an element. The `transform-origin` property allows you to change this point.

You can specify values using keywords (e.g., `top left`, `bottom right`), percentages, or lengths (e.g., `20% 80%`, `50px 100px`). For 3D transforms, a Z-axis value can also be provided.

.custom-origin-rotate {
    transform-origin: top left; /* Rotate from the top-left corner */
    transform: rotate(45deg);
}