Transforms

The CSS transform property repositions an element visually by moving, rotating, scaling, or skewing it in 2D or 3D space, all without disturbing the surrounding layout.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

2D transforms are like moving a sticker on a flat desk — you can slide it, spin it, stretch it, or tilt it. 3D transforms add depth — imagine holding a playing card and flipping it over, or spinning a globe. The perspective property is like how close your eyes are to the object — closer means more dramatic depth.

3D transforms add a Z-axis (depth). The perspective property controls how "deep" the 3D effect feels — lower values create more dramatic perspective.

The classic 3D effect — a card that flips to reveal content on the back:

The ultimate 3D CSS demo — a spinning cube with six faces positioned in 3D space:

You can now manipulate elements in 2D and 3D space with CSS:

Practice quiz

What does the transform function translate(x, y) do?

  • Resizes the element
  • Rotates the element
  • Moves the element without affecting the surrounding layout
  • Skews the element

Answer: Moves the element without affecting the surrounding layout. translate(x, y) shifts the element visually; transforms don't affect page layout, so other elements stay in place.

What does scale(1.5) do to an element?

  • Makes it 1.5 times its original size
  • Moves it 1.5px
  • Rotates it 1.5 degrees
  • Reduces it to 15%

Answer: Makes it 1.5 times its original size. scale() multiplies the element's size; 1 is the original, so scale(1.5) makes it 150% as large.

In which direction does rotate(45deg) turn an element?

  • Counter-clockwise
  • It flips it vertically
  • It moves it 45px
  • Clockwise

Answer: Clockwise. A positive rotate() angle turns the element clockwise; a negative angle turns it counter-clockwise.

A key advantage of transforms is that they...

  • Change the document flow
  • Don't affect the layout of surrounding elements
  • Only work on text
  • Require JavaScript

Answer: Don't affect the layout of surrounding elements. Transforms reposition an element visually without disturbing the layout, so neighbouring elements don't move.

Where must the perspective property be set for a 3D effect to appear?

  • On the parent/container element
  • On the rotating child itself
  • On the body only
  • On the html root

Answer: On the parent/container element. perspective is set on the parent (container). It defines the viewer's distance from the 3D plane; without it, 3D transforms look flat.

What does a lower perspective value (e.g. 200px vs 1000px) produce?

  • A flatter look
  • No change
  • A more dramatic, exaggerated depth effect
  • A larger element

Answer: A more dramatic, exaggerated depth effect. Lower perspective values place the viewer closer, exaggerating the depth; higher values look flatter and more distant.

What does transform-style: preserve-3d do?

  • Hides the element's back
  • Keeps child elements positioned in 3D space instead of flattening them
  • Doubles the perspective
  • Disables animations

Answer: Keeps child elements positioned in 3D space instead of flattening them. preserve-3d lets nested children keep their own 3D positions; without it, children are flattened into the parent's 2D plane.

Which property hides the reverse side of a rotated element in a flip card?

  • overflow: hidden
  • visibility: hidden
  • display: none
  • backface-visibility: hidden

Answer: backface-visibility: hidden. backface-visibility: hidden hides an element's back face when it's rotated away, so you don't see through to the mirror image.

In the 3D cube, what positions each face outward from the center?

  • margin: 100px
  • A rotate plus translateZ(100px)
  • position: absolute alone
  • z-index: 100

Answer: A rotate plus translateZ(100px). Each face is rotated to its orientation (rotateY/rotateX) and pushed out along the Z-axis with translateZ(100px) — half the cube's size.

Which transforms are GPU-accelerated and best for smooth 60fps animation?

  • width and height
  • margin and padding
  • transform and opacity
  • top and left

Answer: transform and opacity. transform (and opacity) are composited on the GPU, so they animate smoothly without triggering layout reflow like width/height/top/left do.