CSS Transforms

What Are Transforms?

CSS transforms allow you to apply 2D effects to elements like moving, rotating, scaling, or skewing them without changing the layout around them.

Common Transform Functions

• translate(x, y): Moves an element along the X and Y axes
• rotate(angle): Rotates the element by a specified degree
• scale(x, y): Scales an element up or down
• skew(x, y): Skews the element by given angles
• matrix(a, b, c, d, e, f): Combines all transforms in one function

Visual Examples

Translate:

transform: translate(50px, 20px);

Rotate:

transform: rotate(45deg);

Scale:

transform: scale(1.5);

Skew:

transform: skewX(20deg);

Matrix:

transform: matrix(1, 0.3, 0.3, 1, 0, 0);

Best Practices

• Combine with transition for interactive effects
• Use transform instead of manipulating position or margin for performance
• Works well with animations and keyframes

Common 3D Transforms

• perspective: Defines the distance between the user and the Z=0 plane.
• rotateX(deg): Rotates an element around the X-axis.
• rotateY(deg): Rotates an element around the Y-axis.
• rotateZ(deg): Rotates an element around the Z-axis (similar to 2D rotate).
• translateZ(px): Moves the element along the Z-axis toward or away from the user.
• transform-style: preserve-3d: Allows child elements to preserve 3D transforms.

3D Transform Visual Examples

parent {
  perspective: 500px;
}

transform: rotateX(45deg);

transform: rotateY(45deg);

transform: rotateZ(45deg);

transform: translateZ(50px);

parent {
  perspective: 500px;
}

.container {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

.child {
  transform: translateZ(30px);
}

Practice Prompt

Try creating a card that rotates and scales on hover using transform.

Here is the code to the prompt. Click to download

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic