CSS transformations allow you to modify the appearance and position of elements using two main types: 2D and 3D transformations. The key difference is that 2D transformations operate on the X and Y axes, while 3D transformations introduce an additional Z axis, allowing elements to appear closer or farther away from the viewer.

Key Differences

1
2D Transformations — Work on a flat plane using the X and Y axes (e.g., translateX, translateY, rotate, scale).
2
3D Transformations — Extend transformations into the Z axis, creating depth and perspective (e.g., translateZ, rotateX, rotateY, rotateZ).

Example: 2D Transformation

In this example, the element rotates and scales on a 2D plane—there’s no perception of depth.

Example: 3D Transformation

Here, the element rotates around the Y-axis and moves closer along the Z-axis, giving it a realistic 3D depth effect when combined with perspective.

Common 2D Transform Functions

1
translate(x, y) — Moves the element along X and Y axes.
2
rotate(angle) — Rotates the element in 2D space.
3
scale(x, y) — Resizes the element on X and Y axes.
4
skew(x-angle, y-angle) — Tilts the element along X or Y axes.

Common 3D Transform Functions

1
translateZ(z) — Moves the element closer or farther away along the Z axis.
2
rotateX(angle) — Rotates around the horizontal X-axis.
3
rotateY(angle) — Rotates around the vertical Y-axis.
4
rotateZ(angle) — Rotates within the 3D space (like a 2D rotation but within perspective).

Best Practices

1
Use 2D transformations for simple animations or layout adjustments.
2
Use 3D transformations to create perspective and depth effects (e.g., card flips or rotating cubes).
3
Add a perspective property on the parent element for realistic 3D effects.
4
Always include transform-style: preserve-3d on elements that contain nested 3D-transformed children.

Difficulty: 5/10

Topics: transform, 2D vs 3D, performance

Scenario Questions

0-2 years experience

1
If you need to rotate a card element by 45 degrees on hover, would you use a 2D or 3D transform, and why?
2
What happens to sibling elements when you apply transform: translateX(100px) versus transform: translate3d(100px, 0, 0)?
3
How would you flip an image horizontally using CSS transforms? Which function would you choose?

2-5 years experience

1
You added a transform: rotateY(180deg) to a modal, but it disappears in Chrome. Walk me through how you'd debug the issue.
2
When animating a list with translateZ(0) to trigger GPU acceleration, what trade‑offs should you consider for mobile performance?
3
Explain why combining scale() and perspective() sometimes yields unexpected sizing, and how you'd fix it in a responsive component.

5-8 years experience

1
Our design system wants to support both 2D and 3D card flip animations across browsers. How would you architect the CSS/JS layer to handle fallbacks and keep bundle size low?
2
Discuss the performance implications of using many nested 3D transforms on a page with thousands of items. What strategies would you employ to mitigate jank?
3
If a legacy codebase uses matrix() for 2D transforms and we need to migrate to matrix3d() for new features, how would you plan the migration to avoid regressions?

8+ years experience

1
At a platform level, we need to decide whether to expose a CSS‑only 3D transform API or a JavaScript‑driven abstraction for cross‑team UI components. What factors would drive your decision?
2
How would you design a theming system that lets designers toggle between flat (2D) and depth‑rich (3D) visual styles without rewriting component markup?
3
Consider a global CSS framework that must support older browsers lacking 3D transform support. Outline a long‑term strategy for progressive enhancement and maintenance.

Follow-up Questions

❓Can you give an example where a 3D transform caused layout or rendering issues?
❓What browser quirks have you encountered with preserve-3d or perspective?
❓How do you measure the performance impact of a transform on the main thread?