Questions

17 of 30

1What is the purpose of the transform property in CSS?

2What are the different types of CSS transformations?

3What does transform: translate() do?

4What is the difference between translateX() and translateY()?

5How does rotate() work in CSS?

6What is the unit used in rotation?

7What is the difference between scale() and scaleX(), scaleY()?

8What happens when you use negative values in scale()?

9What does the skew() function do?

10Can you combine multiple transform functions together? How? What is the use of the transform-origin property?

11What is the default transform-origin value?

12How does changing transform-origin affect rotation or scaling?

13What is the difference between translate() and using position or margin for movement?

14What is the difference between 2D and 3D transformations?

15What is the difference between 2D and 3D transformations?

16How do you apply a 3D rotation using CSS?

17How do you apply a 3D rotation using CSS?

18What are perspective and perspective-origin in 3D transforms? What is the purpose of transform-style: preserve-3d?

19What is the use of matrix() in CSS transforms?

20What’s the difference between matrix() and matrix3d()?

21How can you center an element using transform and translate()?

22What is the transition property in CSS used for?

23What are the four main components of a transition?

24What does transition-duration specify?

25What are the common timing function values (e.g., ease, linear, ease-in)?

26What is the shorthand syntax for transition?

27Can multiple CSS properties be transitioned simultaneously? How does transition differ from animation in CSS?

28Can you apply a transition to an element’s pseudo-class (like :hover)?

29Can transitions be triggered by JavaScript?

30What happens if transition-duration is set to 0s?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

17 / 30

How do you apply a 3D rotation using CSS?

Applying 3D Rotation Using CSS

In CSS, you can apply a 3D rotation to an element using functions like rotateX(), rotateY(), or rotateZ() within the transform property. These functions rotate the element around the corresponding axis, creating depth and perspective when combined with a perspective property.

Example: Basic 3D Rotation

This example rotates the element 45 degrees around the Y-axis, giving the illusion of depth. However, without perspective, the effect appears flat.

Example: 3D Rotation with Perspective

The perspective property applied to the parent element defines the viewer’s distance from the object, making the rotation appear more realistic. Multiple rotations (around X and Y) can be combined for complex 3D effects.

Example: Hover 3D Flip Animation

This creates a smooth 3D flip effect when the user hovers over the card. The transform-style: preserve-3d property ensures that child elements maintain their 3D position during the transformation.

Common 3D Rotation Functions

1
rotateX(angle) — Rotates the element around the horizontal X-axis.
2
rotateY(angle) — Rotates the element around the vertical Y-axis.
3
rotateZ(angle) — Rotates the element within the 3D space (like a 2D spin but with depth).

Best Practices

1
Always apply perspective on the parent element to enhance 3D realism.
2
Combine rotateX, rotateY, and rotateZ for multi-axis rotations.
3
Use transform-style: preserve-3d when nesting 3D-transformed elements.
4
Experiment with lighting and shadows for more realistic 3D scenes.