Advanced Features

CSS Transforms

Translate, rotate, scale, and skew elements in 2D and 3D.

12D Transforms

Move, rotate, scale, and skew without affecting layout.

Example Code

css

.card:hover {
  transform: translateY(-4px) scale(1.02);
}

23D Transforms

Add depth with perspective and 3D rotation.

Example Code

css

.scene { perspective: 800px; }
.card {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.card:hover { transform: rotateY(180deg); }

3transform-origin

Change the pivot point for transforms.

Example Code

css

.flag {
  transform-origin: top left;
  transform: rotate(8deg);
}

4Understand it in a real interface

A transform changes the visual presentation while preserving the element’s original normal-flow allocation. Rotation, translation, and scale are applied in a meaningful order. Transforming an ancestor can also change stacking behavior, so inspect positioned descendants when adding effects.

5Try it yourself

Move a card slightly upward on hover and observe that neighboring cards keep their positions. Change the transform origin before rotating it. Add a nested popup and inspect its stacking, then check that the effect does not clip text or controls.

Finished reading?

Mark this topic as complete to track progress.

CSS Transitions

Next Topic

CSS Animations