CSS 2D Transforms Practice Questions with Solutions

By /

Introduction

CSS 2D Transforms allow you to change the position, size, angle, and shape of HTML elements without affecting the document layout. Using the transform property, you can translate, rotate, scale, skew, and combine multiple transformations. CSS 2D transforms are widely used in animations, buttons, cards, images, and modern web interfaces. In this chapter, you’ll practice CSS 2D transforms through simple solved CSS 2D Transforms practice questions that are easy for beginners to understand.

Question 1: Move an Element Horizontally

Problem Statement

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

CSS Code

div {    transform: translateX(100px);}

Output

The <div> moves 100 pixels to the right.

Explanation

  • translateX() moves an element along the horizontal axis.
  • Positive values move the element to the right.
  • Negative values move it to the left.

Question 2: Move an Element Vertically

Problem Statement

Write CSS to move a <div> 50 pixels downward.

CSS Code

div {    transform: translateY(50px);}

Output

The <div> moves 50 pixels downward.

Explanation

  • translateY() moves an element along the vertical axis.
  • Positive values move it downward.
  • Negative values move it upward.

Question 3: Rotate an Element

Problem Statement

Write CSS to rotate an image by 45 degrees.

CSS Code

img {    transform: rotate(45deg);}

Output

The image rotates 45 degrees clockwise.

Explanation

  • rotate() turns an element around its center.
  • deg represents degrees.
  • Positive values rotate clockwise.

Question 4: Increase the Size of an Element

Problem Statement

Write CSS to enlarge a button to 1.5 times its original size.

CSS Code

button {    transform: scale(1.5);}

Output

The button appears 50% larger than its original size.

Explanation

  • scale() changes the size of an element.
  • Values greater than 1 enlarge the element.
  • Values between 0 and 1 reduce its size.

Question 5: Skew an Element Horizontally

Problem Statement

Write CSS to skew a <div> by 20 degrees along the X-axis.

CSS Code

div {    transform: skewX(20deg);}

Output

The <div> appears slanted horizontally.

Explanation

  • skewX() tilts an element along the horizontal axis.
  • The original size remains unchanged.
  • Skew effects are often used for creative layouts.

Question 6: Skew an Element Vertically

Problem Statement

Write CSS to skew a <div> by 15 degrees along the Y-axis.

CSS Code

div {    transform: skewY(15deg);}

Output

The <div> appears slanted vertically.

Explanation

  • skewY() tilts an element along the vertical axis.
  • Positive values skew the element downward.
  • This effect is useful for creative UI designs.

Question 7: Move an Element on Both Axes

Problem Statement

Write CSS to move a <div> 80 pixels to the right and 40 pixels downward.

CSS Code

div {    transform: translate(80px, 40px);}

Output

The <div> moves 80px right and 40px down.

Explanation

  • translate(x, y) moves an element on both axes.
  • The first value controls horizontal movement.
  • The second value controls vertical movement.

Question 8: Scale Width and Height Separately

Problem Statement

Write CSS to make a <div> twice as wide and 1.5 times taller.

CSS Code

div {    transform: scale(2, 1.5);}

Output

The <div> becomes twice as wide and 50% taller.

Explanation

  • The first value scales the width.
  • The second value scales the height.
  • Separate scaling provides more control over element size.

Question 9: Combine Multiple 2D Transforms

Problem Statement

Write CSS to move a <div> 50px to the right and rotate it by 30 degrees.

CSS Code

div {    transform: translateX(50px) rotate(30deg);}

Output

The <div> moves to the right and rotates 30 degrees.

Explanation

  • Multiple transform functions can be combined.
  • They are written in a single transform property.
  • The order of transforms affects the final result.

Question 10: Rotate an Element Counterclockwise

Problem Statement

Write CSS to rotate an image 45 degrees counterclockwise.

CSS Code

img {    transform: rotate(-45deg);}

Output

The image rotates 45 degrees counterclockwise.

Explanation

  • Negative values rotate elements counterclockwise.
  • Positive values rotate clockwise.
  • Rotation is commonly used for icons and interactive effects.

Key Takeaways

  • transform modifies the appearance of an element without changing the document layout.
  • translateX() and translateY() move elements horizontally and vertically.
  • translate() moves an element on both axes.
  • rotate() turns an element clockwise or counterclockwise.
  • scale() changes the size of an element.
  • skewX() and skewY() create slanted effects.
  • Multiple transforms can be combined in one transform property.
  • The order of transform functions affects the final appearance.

Frequently Asked Questions (FAQs)

1. What are CSS 2D transforms?

CSS 2D transforms allow you to move, rotate, scale, and skew HTML elements in a two-dimensional space.

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

Use the transform property.

Example:

div {    transform: rotate(45deg);}

3. How do I move an element horizontally?

Use:

div {    transform: translateX(100px);}

4. How do I rotate an element?

Use:

img {    transform: rotate(45deg);}

5. How do I make an element larger?

Use:

div {    transform: scale(1.5);}

6. Can I apply multiple transforms at the same time?

Yes. You can combine multiple transform functions.

Example:

div {    transform: translateX(50px) rotate(30deg);}

7. What is the difference between translate() and scale()?

  • translate() moves an element to a new position.
  • scale() changes the size of an element.

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

Related Posts

Scroll to Top