CSS 3D Transforms Practice Questions with Solutions

By /

Introduction

CSS 3D Transforms allow you to move, rotate, and scale HTML elements in three-dimensional space. Unlike 2D transforms, 3D transforms use the X, Y, and Z axes to create realistic depth and interactive effects. They are commonly used for image galleries, flip cards, product showcases, sliders, and modern web animations. In this chapter, you’ll practice CSS 3D transforms through simple solved CSS 3D Transforms practice questions that are easy for beginners to understand.

Question 1: Move an Element Along the Z-Axis

Problem Statement

Write CSS to move a <div> 100 pixels toward the viewer.

CSS Code

div {    transform: translateZ(100px);}

Output

The <div> appears 100 pixels closer to the viewer (when used with a 3D perspective).

Explanation

  • translateZ() moves an element along the Z-axis.
  • Positive values move the element closer to the viewer.
  • A perspective value is typically required for the depth effect to be visible.

Question 2: Rotate an Element Around the X-Axis

Problem Statement

Write CSS to rotate a card 45 degrees around the X-axis.

CSS Code

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

Output

The card tilts 45 degrees around the horizontal (X) axis.

Explanation

  • rotateX() rotates an element around the X-axis.
  • Positive values tilt the top of the element away from the viewer.
  • This effect is commonly used for flip animations.

Question 3: Rotate an Element Around the Y-Axis

Problem Statement

Write CSS to rotate an image 60 degrees around the Y-axis.

CSS Code

img {    transform: rotateY(60deg);}

Output

The image rotates 60 degrees around the vertical (Y) axis.

Explanation

  • rotateY() creates a left-to-right 3D rotation.
  • It is commonly used for card flip effects.
  • A perspective improves the 3D appearance.

Question 4: Rotate an Element Around the Z-Axis

Problem Statement

Write CSS to rotate a button 90 degrees around the Z-axis.

CSS Code

button {    transform: rotateZ(90deg);}

Output

The button rotates 90 degrees clockwise.

Explanation

  • rotateZ() rotates around the Z-axis.
  • It produces the same visual effect as the 2D rotate() function.
  • It is included for consistency with other 3D transform functions.

Question 5: Apply Perspective

Problem Statement

Write CSS to add a perspective of 800 pixels to a container.

CSS Code

.container {    perspective: 800px;}

Output

Child elements inside the container display with a realistic 3D depth effect.

Explanation

  • perspective controls how strong the 3D effect appears.
  • Smaller values create stronger depth.
  • Larger values create a more subtle 3D effect.

Question 6: Scale an Element in 3D

Problem Statement

Write CSS to make a <div> 1.5 times larger on the X, Y, and Z axes.

CSS Code

div {    transform: scale3d(1.5, 1.5, 1.5);}

Output

The <div> appears 50% larger in all three dimensions.

Explanation

  • scale3d(x, y, z) scales an element along all three axes.
  • Values greater than 1 enlarge the element.
  • Values between 0 and 1 reduce its size.

Question 7: Combine Perspective and Rotation

Problem Statement

Write CSS to rotate a card 45 degrees around the Y-axis with a perspective effect.

CSS Code

.container {    perspective: 1000px;}.card {    transform: rotateY(45deg);}

Output

The card displays with a realistic 3D rotation.

Explanation

  • perspective adds depth to the 3D scene.
  • rotateY() rotates the card around the vertical axis.
  • Together they create a realistic 3D effect.

Question 8: Preserve 3D Child Elements

Problem Statement

Write CSS to ensure child elements keep their 3D position.

CSS Code

.container {    transform-style: preserve-3d;}

Output

Child elements maintain their 3D positioning instead of being flattened.

Explanation

  • transform-style: preserve-3d; keeps child elements in 3D space.
  • Without it, child elements are rendered in a flattened 2D view.
  • This property is useful for complex 3D layouts.

Question 9: Combine Multiple 3D Transforms

Problem Statement

Write CSS to move a <div> 50px toward the viewer and rotate it 30 degrees around the X-axis.

CSS Code

div {    transform: translateZ(50px) rotateX(30deg);}

Output

The <div> moves closer to the viewer and tilts upward.

Explanation

  • Multiple 3D transform functions can be combined.
  • translateZ() changes depth.
  • rotateX() adds a tilt effect.
  • The order of transform functions affects the final result.

Question 10: Create a Simple Flip Card Effect

Problem Statement

Write CSS to rotate a card 180 degrees around the Y-axis when the mouse pointer is placed over it.

CSS Code

.card:hover {    transform: rotateY(180deg);}

Output

When the mouse hovers over the card, it performs a horizontal flip animation.

Explanation

  • :hover applies the transform when the mouse pointer is over the element.
  • rotateY(180deg) flips the card horizontally.
  • This technique is commonly used for flashcards, product cards, and interactive UI components.

Key Takeaways

  • CSS 3D transforms use the X, Y, and Z axes.
  • translateZ() moves an element closer to or farther from the viewer.
  • rotateX(), rotateY(), and rotateZ() rotate elements around different axes.
  • scale3d() changes an element’s size in three dimensions.
  • perspective adds realistic depth to 3D scenes.
  • transform-style: preserve-3d; keeps child elements in 3D space.
  • Multiple 3D transforms can be combined in one transform property.
  • 3D transforms are commonly used for flip cards, galleries, sliders, and modern web interfaces.

Frequently Asked Questions (FAQs)

1. What are CSS 3D transforms?

CSS 3D transforms allow you to move, rotate, and scale HTML elements in three-dimensional space using the X, Y, and Z axes.

2. Which CSS property is used for 3D transforms?

Use the transform property.

Example:

div {    transform: rotateY(45deg);}

3. What does perspective do?

perspective creates the illusion of depth, making 3D transforms appear more realistic.

Example:

.container {    perspective: 800px;}

4. How do I move an element toward the viewer?

Use:

div {    transform: translateZ(100px);}

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

It keeps child elements in 3D space instead of flattening them into a 2D plane.

6. Can I combine multiple 3D transforms?

Yes. You can combine functions such as translateZ(), rotateX(), and scale3d() in a single transform property.

7. Where are CSS 3D transforms commonly used?

CSS 3D transforms are commonly used for:

  • Flip cards
  • Product showcases
  • Image galleries
  • Sliders
  • Interactive buttons
  • Landing pages
  • Modern UI animations

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top