Transform property in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS transform?

Given this CSS code, what will be the visual effect on the element?

CSS

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

A The element moves 50px to the left, then rotates 45 degrees counterclockwise.

B The element moves 50px to the right, then rotates 45 degrees clockwise.

C The element rotates 45 degrees counterclockwise, then moves 50px to the left.

D The element rotates 45 degrees clockwise, then moves 50px to the right.

💡 Hint

Remember that transform functions are applied in the order they are written.

The transform property applies functions from left to right. So first the element rotates 45 degrees clockwise, then it moves 50px to the right along the rotated axis.

🧠 Conceptual

intermediate

Which transform function changes the size of an element?

Choose the CSS transform function that changes the size of an element without affecting its position.

A translate()

B scale()

C rotate()

D skew()

💡 Hint

Think about which function stretches or shrinks the element.

scale() changes the size of the element by stretching or shrinking it horizontally and/or vertically.

❓ layout

advanced

What is the visual result of this transform sequence?

Consider the CSS below. What will the element look like after these transforms?

CSS

div {
  transform: translate(100px, 0) rotate(90deg) scale(0.5);
  width: 200px;
  height: 100px;
  background-color: teal;
}

A The element rotates 90 degrees clockwise, moves 100px right, and shrinks to half size.

B The element shrinks to half size, rotates 90 degrees clockwise, then moves 100px right.

C The element moves 100px right, rotates 90 degrees clockwise, and shrinks to half size.

D The element moves 100px right, shrinks to half size, then rotates 90 degrees clockwise.

💡 Hint

Transforms apply in the order written, affecting the coordinate system for the next transform.

The element first moves 100px right, then rotates 90 degrees clockwise around its origin, then scales down to half its size.

❓ accessibility

advanced

How can CSS transform affect accessibility?

Which statement about CSS transform and accessibility is true?

A Transform changes the element's position visually but does not affect keyboard focus order.

B Transform moves the element and automatically updates the tab order for keyboard navigation.

C Transform disables screen readers from reading the transformed element.

D Transform causes the element to be removed from the accessibility tree.

💡 Hint

Think about how visual changes relate to keyboard and screen reader behavior.

CSS transform changes how an element looks on screen but does not change its position in the document flow or keyboard navigation order.

❓ selector

expert

Which CSS selector targets elements with a transform that includes rotate(45deg)?

Given multiple elements with different transform values, which selector matches only those with rotate(45deg) in their transform property?

A [style*='rotate(45deg)']

B [style$='rotate(45deg)']

C [style^='rotate(45deg)']

D [transform='rotate(45deg)']

💡 Hint

Think about how attribute selectors match substrings inside style attributes.

The attribute selector [style*='rotate(45deg)'] matches any element whose inline style contains the substring rotate(45deg).