? CSS 2D & 3D Transformations

⚡ Quick Overview

CSS transforms let you visually manipulate HTML elements by rotating, scaling, moving, and skewing them in 2D or 3D space. These effects make interfaces feel dynamic and interactive without changing the normal document flow of the page.

? Key Concepts

• 2D transforms – use functions like rotate(), scale(), translate(), and skew() on the X/Y plane.
• 3D transforms – use functions like rotateX(), rotateY(), and rotateZ() to add depth.
• transform property – holds one or more transform functions: transform: rotate(45deg) scale(1.2);
• Order matters – transforms are applied from right to left.
• Matrix transforms – matrix(a,b,c,d,e,f) combines multiple 2D transforms into a single function.
• transform-style: preserve-3d; – keeps nested elements in 3D space when using 3D transforms.
• No layout impact – transforms do not affect how other elements are positioned.

? Syntax & Theory

The transform property accepts one or more transform functions. You can write a single effect or chain several together:

/* Basic 2D transforms */
.box-rotate {
  transform: rotate(45deg);       /* rotate 45 degrees */
}
.box-scale {
  transform: scale(1.2);          /* scale 1.2 times */
}
.box-translate {
  transform: translateX(50px);    /* move 50px to the right */
}
.box-skew {
  transform: skewY(20deg);        /* skew along Y-axis */
}

? Matrix Function (2D)

The matrix() function combines multiple 2D transforms into one: matrix(a, b, c, d, e, f)

• a – horizontal scaling (scaleX)
• b – vertical skewing (skewY)
• c – horizontal skewing (skewX)
• d – vertical scaling (scaleY)
• e – horizontal translation (translateX) in pixels
• f – vertical translation (translateY) in pixels

Instead of writing multiple transform functions separately, you can express the same effect using a single matrix(), which can be useful for fine-tuned animations or when working with low-level graphics.

? 3D Transformations

CSS also supports transforms in 3D space using functions like rotateX(), rotateY(), and rotateZ(). When you work with nested elements, the transform-style: preserve-3d; property lets child elements keep their 3D positioning, creating layered depth effects.

Note: To view 3D transforms more clearly, we usually add perspective to a parent element, but that property is not being covered here intentionally.

/* Simple 3D card using rotateX() */
.card-3d {
  transform-style: preserve-3d;
  transform: rotateX(60deg);
}

/* Combined 2D transform using matrix() */
.button-matrix {
  transform: matrix(1, 0.5, -0.5, 1, 30, 20);
}

? Practical Demo Markup

Below is a small example that uses different transforms on multiple boxes. Each box uses a different transform function so you can clearly see the effect.

<!-- Demo boxes with different transforms -->
<div class="demo-row">
  <div class="demo-box" style="transform: rotate(45deg);">Rotate 45°</div>
  <div class="demo-box" style="transform: scale(1.5);">Scale 1.5x</div>
  <div class="demo-box" style="transform: translateX(50px);">Translate X</div>
  <div class="demo-box" style="transform: skewY(20deg);">Skew Y</div>
  <div class="demo-box" style="transform: matrix(1, 0.5, -0.5, 1, 30, 20);">Matrix</div>
  <div class="demo-box" style="transform-style: preserve-3d; transform: rotateX(60deg);">RotateX 60°</div>
</div>

? Live Output & Explanation