Chapter 20 Advanced 60 Questions

Practice Questions — CSS Transforms (2D and 3D)

← Back to Notes

10 Easy

15 Medium

9 Hard

Topic-Specific Questions

Question 1

Easy

What does transform: translate(50px, 20px) do?

X first, Y second.

Moves the element 50 pixels to the right and 20 pixels down.

Question 2

Easy

What does transform: rotate(180deg) do?

Half a full turn.

Rotates the element 180 degrees (upside down).

Question 3

Easy

What does transform: scale(1.5) do?

A number greater than 1 means grow.

Makes the element 150% of its original size (50% larger in both dimensions).

Question 4

Easy

What does transform-origin: top left do?

Pivot point.

Makes all transforms pivot from the top-left corner of the element instead of the default center.

Question 5

Easy

What is the Z axis in 3D transforms?

In/out of the screen.

The Z axis points from the screen toward the viewer. Positive Z pulls an element forward; negative Z pushes it backward.

Question 6

Medium

What does transform: translate(-50%, -50%) do?

Classic centering trick.

Moves the element 50% of its OWN width to the left and 50% of its OWN height upward. Combined with top: 50% and left: 50% on the parent, this centers an element perfectly.

Question 7

Medium

Why does this look flat?

.card {
  transform: rotateY(45deg);
}

Missing a parent property.

Missing perspective on the parent. Without perspective, 3D rotations look like flat scaling because there is no depth reference.

Question 8

Medium

What is the difference between these two?

/* A */ transform: translate(100px) rotate(45deg);
/* B */ transform: rotate(45deg) translate(100px);

Order matters.

A: moves 100px right then rotates 45 degrees in place. B: rotates 45 degrees first, then translates along the rotated axis (so it moves diagonally).

Question 9

Medium

What does backface-visibility: hidden do?

Hides the reverse side.

Hides the back (reverse) of an element when it is rotated more than 90 degrees. Essential for flip cards.

Question 10

Medium

What is transform-style: preserve-3d used for?

Nested 3D elements.

It keeps child elements in 3D space instead of flattening them into the parent's 2D plane. Required for cubes, flip cards, and any nested 3D transforms.

Question 11

Medium

What does transform: skewX(20deg) do?

Slant horizontally.

Slants (shears) the element 20 degrees along the horizontal axis, creating an italic-like effect.

Question 12

Hard

Why is transforming an element faster than changing its top/left?

Think about the browser rendering pipeline.

Changing top/left triggers LAYOUT recalculation every frame (the browser has to recompute positions of surrounding elements). Transform runs on the GPU and only requires a COMPOSITE step — much faster.

Question 13

Hard

What does perspective: 500px vs perspective: 2000px look like differently?

Closer = more dramatic.

500px creates a strong, exaggerated 3D effect (like looking through a fish-eye lens). 2000px creates a subtle, natural 3D effect. Smaller values bring the viewer closer.

Question 14

Hard

What is the difference between rotate() and rotateZ()?

Both rotate around the Z axis.

They are IDENTICAL. rotate() is shorthand for rotateZ() — rotation around the Z axis (which appears as flat 2D rotation from the viewer's perspective).

Question 15

Hard

Why can you animate transform but not background-image between two images?

Interpolation requires numeric values.

Transform values are numeric (pixels, degrees, scale factors) and can be smoothly interpolated. Background-image URLs are discrete strings — the browser cannot blend two image files together.

Mixed & Application Questions

Question 1

Easy

What does transform: scale(0) do?

Zero scale.

Collapses the element to zero size, making it invisible.

Question 2

Easy

Which unit is used for rotations?

Angle measurement.

deg (degrees), turn, rad (radians), or grad.

Question 3

Medium

Why do CSS transforms not affect surrounding elements?

Transform is visual-only.

Transforms are visual-only operations. They do not change the element's original box in the document flow. Surrounding elements lay out as if the transform did not happen.

Question 4

Medium

What does this do?

.box {
  transform: translateY(-6px) scale(1.05);
  transition: transform 0.3s;
}

Two transforms at once.

The box moves up 6 pixels AND grows to 105% of its size simultaneously. With the transition, both changes animate smoothly.

Question 5

Medium

What is transform: translate3d(0, 0, 0) and why is it used?

Performance hint.

It applies a zero translation in 3D space, which forces the browser to create a GPU compositing layer for the element. Developers used to use this as a hack to force hardware acceleration.

Question 6

Medium

Why is a 3D flip card built with two faces, not one?

One face cannot show different content on both sides.

Each face is a separate element (one for the front, one for the back). The back face is pre-rotated 180 degrees so it starts facing away. When the parent card rotates 180 degrees, the back now faces the viewer and the front faces away (hidden by backface-visibility).

Question 7

Hard

What does transform: matrix(1, 0, 0, 1, 100, 50) do?

2D matrix transformation.

It is equivalent to translate(100px, 50px). The matrix() function represents any combination of translate, rotate, scale, and skew in matrix form.

Question 8

Medium

What does transform: none do?

Reset.

Removes all transforms, resetting the element to its untransformed state.

Question 9

Hard

Can you transform an inline element like <span>?

Think about display types.

Yes, but only after changing its display. Inline elements can be transformed only if their display is inline-block, block, flex, grid, etc. Pure inline display is not transformable.

Question 10

Medium

Which is faster: margin-left: 50px or transform: translateX(50px)?

GPU vs layout.

transform: translateX(50px) is significantly faster. It runs on the GPU without triggering layout. margin-left causes a layout recalculation.

Question 11

Easy

What does transform: scaleY(-1) do?

Negative scale.

Flips the element vertically (mirror image upside down), without resizing.

Question 12

Medium

What happens to an element with transform: scale(2) in terms of layout?

Transform does not change layout.

The element appears twice as large visually, but its layout box stays the same. Neighboring elements do not shift to make room. The scaled element may overflow onto or under surrounding content.

Question 13

Hard

What does transform: perspective(500px) rotateY(30deg) do (inline perspective)?

Single-element 3D.

It applies perspective AND the 3D rotation on the same element. Useful for single-element 3D effects when you do not want to put perspective on the parent.

Question 14

Medium

Why is translate percentage useful for centering?

Percentage is relative to the element.

Because translate(-50%, -50%) moves the element by 50% of its own dimensions. Combined with top: 50%; left: 50%, which positions its top-left at the parent's center, the translate shifts it back so its center aligns with the parent's center.

Question 15

Easy

Can you animate CSS transforms?

Yes — that is their main purpose.

Yes. Transforms are fully animatable with both transitions and @keyframes, and they are the most performant things you can animate in CSS.

Question 16

Medium

What is wrong with this flip card code?

.card {
  perspective: 1000px;
}
.face {
  backface-visibility: hidden;
}
.back { transform: rotateY(180deg); }
.card.flipped { transform: rotateY(180deg); }

Missing property for nested 3D.

Missing transform-style: preserve-3d on the card. Without it, the faces collapse into the parent's 2D plane and the flip does not look 3D.

Question 17

Hard

What does transform: rotateY(360deg) on a looping animation look like visually?

Full Y-axis spin.

The element appears to spin around like a door handle or a vertical axis, showing its back at 180 degrees and returning to the front at 360 degrees.

Question 18

Hard

Can you combine 2D and 3D transforms in one declaration?

Yes — and it is common.

Yes. Example: transform: rotateY(45deg) scale(1.1) translateZ(30px). Mixing 2D and 3D functions is allowed and commonly used for interactive effects.

Question 19

Easy

What does transform: rotate(1turn) do?

One full turn.

Rotates the element one full turn (360 degrees). The element ends up in the same visual position as it started.

Multiple Choice Questions

MCQ 1

Which transform function moves an element?

A. move()
B. translate()
C. shift()
D. position()

Answer: B
B is correct. translate(x, y) moves an element by the given amounts.

MCQ 2

Which transform rotates an element?

A. spin()
B. rotate()
C. turn()
D. pivot()

Answer: B
B is correct. rotate(deg) rotates the element around its transform-origin (default center).

MCQ 3

What does transform: scale(0.5) do?

A. Doubles the size
B. Makes the element half its original size
C. Removes the element
D. Pushes it backward in 3D

Answer: B
B is correct. scale(0.5) scales the element to 50% of its original dimensions.

MCQ 4

What does transform-origin control?

A. The source file of the transform
B. The pivot point that transforms are calculated from
C. The starting value of an animation
D. The default transform on page load

Answer: B
B is correct. transform-origin sets the pivot point (default is center) for all transforms.

MCQ 5

How do you combine multiple transforms?

A. Separate with commas
B. Separate with spaces
C. Use multiple transform properties
D. Chain with dots

Answer: B
B is correct. Example: transform: translate(100px) rotate(45deg) scale(1.2). Spaces separate multiple transform functions.

MCQ 6

Which property is required on the PARENT for 3D depth to appear correctly?

A. transform-style
B. backface-visibility
C. perspective
D. depth

Answer: C
C is correct. perspective defines the distance between the viewer and the 3D scene, creating depth.

MCQ 7

Which property keeps nested 3D children in 3D space?

A. transform-style: preserve-3d
B. transform: flat
C. perspective: inherit
D. backface-visibility: visible

Answer: A
A is correct. Without preserve-3d, children are flattened into the parent's 2D plane.

MCQ 8

What does backface-visibility: hidden do?

A. Hides the element on page load
B. Hides the reverse side of a rotated element
C. Hides the background
D. Hides parent elements

Answer: B
B is correct. When an element rotates past 90 degrees, its back is visible. backface-visibility: hidden prevents that.

MCQ 9

Why is transform animated instead of top or left for performance?

A. transform is shorter to type
B. transform runs on the GPU without triggering layout recalculation
C. transform is newer
D. transform has more features

Answer: B
B is correct. transform is GPU-accelerated. top/left trigger layout work on the CPU every frame, causing jank.

MCQ 10

What does translate(-50%, -50%) do when combined with top:50% and left:50%?

A. Moves the element off-screen
B. Perfectly centers the element in its positioned parent
C. Rotates the element
D. Hides the element

Answer: B
B is correct. top/left:50% puts the element's top-left at the parent's center; translate(-50%, -50%) shifts it back by half its own size, centering it.

MCQ 11

Does transform affect surrounding elements?

A. Yes, neighboring elements shift to make room
B. No, transforms are visual-only and do not change layout
C. Only if scale is used
D. Only for 3D transforms

Answer: B
B is correct. Transforms do not change the document flow. The original box is preserved; other elements do not shift.

MCQ 12

Which is different: rotate(45deg) or rotateZ(45deg)?

A. rotate is 2D, rotateZ is 3D
B. They are identical — rotate() is shorthand for rotateZ()
C. rotate works in both, rotateZ only in 3D
D. rotateZ requires perspective

Answer: B
B is correct. 2D rotation is actually rotation around the Z axis. rotate() and rotateZ() produce identical results.

MCQ 13

What does transform: rotate(45deg) translate(100px) do differently from transform: translate(100px) rotate(45deg)?

A. They produce the same result
B. Order matters: the rotation affects the direction of subsequent translates
C. Only the first one works
D. Rotation is ignored when combined with translate

Answer: B
B is correct. After a rotation, the coordinate system is rotated. Subsequent translates move along the rotated axis.

MCQ 14

Which value of perspective creates the most dramatic 3D effect?

A. 10000px
B. 5000px
C. 2000px
D. 300px

Answer: D
D is correct. Smaller perspective values bring the viewer closer, producing steeper, more exaggerated 3D angles.

MCQ 15

Which property animates most efficiently?

A. width
B. margin
C. transform
D. padding

Answer: C
C is correct. transform runs on the GPU. All the others trigger layout work on the CPU.

MCQ 16

What does transform: scaleX(-1) do?

A. Hides the element
B. Mirrors the element horizontally (flip left-right)
C. Doubles the width
D. Collapses the element

Answer: B
B is correct. Negative scale values mirror the element. scaleX(-1) flips it horizontally.

MCQ 17

What are the three essential properties for a 3D flip card?

A. perspective on scene, preserve-3d on card, backface-visibility hidden on faces
B. rotate, translate, scale
C. top, left, position
D. width, height, z-index

Answer: A
A is correct. All three are required: perspective for depth, preserve-3d so faces stay in 3D space, backface-visibility so the back of each face is hidden when rotated.

MCQ 18

What does transform: skewX(15deg) do?

A. Rotates 15 degrees
B. Slants the element horizontally by 15 degrees
C. Scales horizontally by 15
D. Moves 15 pixels

Answer: B
B is correct. skewX slants the element along the X axis, creating an italic-like effect.

MCQ 19

How do you reset all transforms on an element?

A. transform: reset
B. transform: none
C. transform: clear
D. transform: 0

Answer: B
B is correct. transform: none removes all transforms and returns the element to its untransformed state.

MCQ 20

What is translateZ(50px)?

A. Moves 50px along the Y axis
B. Pulls the element 50px toward the viewer in 3D space
C. Increases zoom by 50
D. Adds 50px of z-index

Use perspective on body, transform-style: preserve-3d on card, translateZ on inner elements.

<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; perspective: 1000px; margin: 0; font-family: Arial, sans-serif; }
  .card { width: 300px; padding: 30px; background: linear-gradient(135deg, #a855f7, #ec4899); color: white; border-radius: 20px; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s; cursor: pointer; box-shadow: 0 20px 50px rgba(168, 85, 247, 0.3); }
  .card:hover { transform: rotateX(10deg) rotateY(-12deg) translateZ(20px); box-shadow: 0 30px 70px rgba(168, 85, 247, 0.5); }
  .card h2 { transform: translateZ(40px); margin: 0 0 10px; }
  .card p { transform: translateZ(20px); line-height: 1.6; }
</style>
</head>
<body>
  <div class="card">
    <h2>Meera's Card</h2>
    <p>This card tilts in 3D on hover. The heading floats above the paragraph for added depth.</p>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass