CSS transforms allow you to modify elements in 2D or 3D space without affecting the document flow. You can rotate, scale, move (translate), and skew elements to create dynamic visual effects. Transforms are performant because they're handled by the GPU, making them perfect for animations and interactive elements. They're essential for modern web design, from subtle hover effects to complex 3D rotations.
What Are CSS Transforms?
Transforms modify the visual appearance of elements without changing their position in the document flow. The element still occupies its original space, but appears transformed.
Key Transform Concepts
- No layout impact: Transforms don't affect surrounding elements
- GPU accelerated: Very performant for animations
- Multiple functions: Can combine rotate, scale, translate in one property
- Transform origin: Control the pivot point for transformations
- 2D and 3D: Transform in two or three dimensions
Performance Note: Transforms (especially translate and scale) are GPU-accelerated, making them much more performant than changing properties like top, left, width, or height. Always prefer transforms for animations.
translate() - Moving Elements
translate() moves an element from its current position without affecting the document flow.
/* Move element horizontally and vertically */
.element {
transform: translate(50px, 100px);
/* Move 50px right, 100px down */
}
/* Individual axis functions */
.element {
transform: translateX(50px); /* Horizontal only */
transform: translateY(100px); /* Vertical only */
transform: translateZ(50px); /* 3D depth */
}
/* Percentage values (relative to element size) */
.element {
transform: translate(50%, 50%);
/* Move 50% of element's width right, 50% of height down */
}
/* Negative values move opposite direction */
.element {
transform: translate(-20px, -30px);
/* Move 20px left, 30px up */
}
/* Common pattern: Center element */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Perfect centering */
}translate() Examples
🎯 Perfect Centering Trick:
Use position: absolute, top: 50%, left: 50%, and transform: translate(-50%, -50%) to perfectly center any element regardless of its size. This works because percentages in position are relative to the parent, while percentages in transform are relative to the element itself.
rotate() - Rotating Elements
rotate() rotates an element around its transform origin (center by default).
/* Rotate in degrees */
.element {
transform: rotate(45deg); /* 45 degrees clockwise */
transform: rotate(-45deg); /* 45 degrees counter-clockwise */
}
/* Other angle units */
.element {
transform: rotate(0.25turn); /* Quarter turn */
transform: rotate(3.14rad); /* Radians */
transform: rotate(100grad); /* Gradians */
}
/* 3D rotation on specific axes */
.element {
transform: rotateX(45deg); /* Rotate around X-axis */
transform: rotateY(45deg); /* Rotate around Y-axis */
transform: rotateZ(45deg); /* Same as rotate() */
}
/* Full rotation */
.element {
transform: rotate(360deg); /* Full circle */
}
/* Common hover effect */
.card:hover {
transform: rotate(5deg);
}rotate() Examples
scale() - Resizing Elements
scale() changes the size of an element. Values greater than 1 make it larger, values less than 1 make it smaller.
/* Scale uniformly */
.element {
transform: scale(1.5); /* 150% of original size */
transform: scale(0.5); /* 50% of original size */
transform: scale(2); /* 200% (double size) */
}
/* Scale X and Y separately */
.element {
transform: scale(2, 1); /* 2x width, 1x height */
transform: scale(1, 0.5); /* 1x width, 0.5x height */
}
/* Individual axis functions */
.element {
transform: scaleX(1.5); /* Width only */
transform: scaleY(0.8); /* Height only */
transform: scaleZ(2); /* Depth (3D) */
}
/* Flip element */
.element {
transform: scaleX(-1); /* Flip horizontally */
transform: scaleY(-1); /* Flip vertically */
transform: scale(-1, -1); /* Flip both ways */
}
/* Common hover effect */
.button:hover {
transform: scale(1.1);
}scale() Examples
skew() - Slanting Elements
skew() distorts an element along the X and/or Y axis, creating a slanted effect.
/* Skew both axes */
.element {
transform: skew(20deg, 10deg);
/* Skew 20deg on X-axis, 10deg on Y-axis */
}
/* Individual axis functions */
.element {
transform: skewX(20deg); /* Horizontal skew */
transform: skewY(10deg); /* Vertical skew */
}
/* Negative values */
.element {
transform: skewX(-20deg); /* Skew opposite direction */
}
/* Common use: Parallelogram shape */
.parallelogram {
transform: skewX(20deg);
}
/* Undo skew on child elements */
.parent {
transform: skewX(20deg);
}
.parent .child {
transform: skewX(-20deg); /* Counter-skew */
}skew() Examples
Use Sparingly: Skew can make text harder to read. Use it for decorative elements or subtle effects rather than large text blocks. If you skew a parent element, you may need to counter-skew child text elements for readability.
Combining Multiple Transforms
You can apply multiple transform functions in a single transform property. They're applied in order from right to left.
/* Multiple transforms in one property */
.element {
transform: translate(50px, 100px) rotate(45deg) scale(1.2);
/* Applied right to left: scale, then rotate, then translate */
}
/* Order matters! */
.element {
transform: rotate(45deg) translate(100px, 0);
/* Rotates first, then moves in rotated direction */
}
.element {
transform: translate(100px, 0) rotate(45deg);
/* Moves first, then rotates in place */
}
/* Common pattern: Centered rotation and scale */
.card {
transform: translate(-50%, -50%) rotate(10deg) scale(1.1);
}
/* Complex hover effect */
.button:hover {
transform: translateY(-3px) scale(1.05) rotate(2deg);
}Combining Transforms
transform-origin
transform-origin sets the point around which transformations occur. Default is the center (50% 50%).
/* Default (center) */
.element {
transform-origin: center; /* Same as 50% 50% */
transform-origin: 50% 50%;
}
/* Keywords */
.element {
transform-origin: top left; /* 0% 0% */
transform-origin: top; /* 50% 0% */
transform-origin: top right; /* 100% 0% */
transform-origin: left; /* 0% 50% */
transform-origin: right; /* 100% 50% */
transform-origin: bottom left; /* 0% 100% */
transform-origin: bottom; /* 50% 100% */
transform-origin: bottom right; /* 100% 100% */
}
/* Precise values */
.element {
transform-origin: 20px 30px; /* Pixels */
transform-origin: 75% 25%; /* Percentages */
}
/* Common pattern: Rotate from corner */
.door {
transform-origin: left center;
transform: rotateY(90deg); /* Swings from left edge */
}transform-origin Examples (Red dot = origin point)
Practical Transform Examples
Hover Card Effect
Interactive Card Effects
Loading Spinner
Loading Spinner with Rotation
Image Gallery Effect
Gallery Zoom Effect
Key Takeaways
- translate(): Move elements (X, Y, Z axes)
- rotate(): Rotate elements (degrees, turns, radians)
- scale(): Resize elements (values: 0.5 = 50%, 2 = 200%)
- skew(): Slant elements along axes
- Transforms don't affect document flow
- GPU-accelerated for better performance
- Combine multiple transforms in one property
- Order matters when combining transforms
transform-originsets the pivot point- Use translate instead of top/left for animations
- Negative values work for all transform functions
- Percentages in translate are relative to element size
What's Next?
Now that you understand CSS transforms, you're ready to learn about Transitions. In the next lesson, we'll explore how to create smooth animations between states using transition properties. You'll learn how to animate transforms, colors, sizes, and other properties to create polished, interactive user experiences.
Transforms are powerful tools for creating dynamic visual effects. Practice combining translate, rotate, and scale for hover effects, and you'll add professional polish to your designs. Remember: transforms are performant, so use them liberally for animations!