CSS 2D transforms allow developers to translate (move), rotate, scale (resize), and skew elements in two-dimensional space without disrupting normal page layout flow.
The transform property applies one or more 2D transformation functions:
.box {
transform: translate(20px, 10px); /* Move X and Y */
transform: rotate(45deg); /* Rotate clockwise */
transform: scale(1.2); /* Scale size up 120% */
transform: skew(10deg, 5deg); /* Skew element angles */
}
/* Combined transform functions */
.box-hover:hover {
transform: translateY(-6px) scale(1.05);
}
Function breakdown:
translate(x, y): Shifts an element along the X (horizontal) and Y (vertical) axes.rotate(angle): Rotates an element clockwise (45deg) or counter-clockwise (-90deg).scale(x, y): Multiplies element dimensions (scale(1.5) scales up 150%).skew(x-angle, y-angle): Distorts elements along X and Y axes.flowchart TD
A["transform Functions"] --> B["translate(x, y) -> Move position without layout disruption"]
A --> C["rotate(deg) -> Rotate around central origin point"]
A --> D["scale(factor) -> Grow or shrink element size"]
A --> E["skew(deg) -> Slant / distort side angles"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 2D Transforms Example</title>
<style>
.transform-card {
background-color: #1e293b;
padding: 1.5rem;
border-radius: 8px;
max-width: 350px;
border: 1px solid #334155;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.transform-card:hover {
transform: translateY(-8px) scale(1.02);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="transform-card">
<h3 style="color: #38bdf8; margin-top: 0;">Interactive 2D Lift</h3>
<p>Hover over this card to see <code>translateY(-8px)</code> and <code>scale(1.02)</code> in action!</p>
</div>
</body>
</html>
transition: Always add a transition: transform 0.3s ease to ensure smooth animated movements.translate for UI animations instead of top/left: transform: translate() uses GPU hardware acceleration, avoiding browser layout repaints.transform-origin to change pivot point: Change rotation pivot points (e.g. transform-origin: top left).Create a CSS hover rule .card:hover applying transform: translateY(-5px);!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.