Transform

CSS transformations allow you to rotate, scale, skew, or translate an element.

Experiment with MDN’s CSS transform demo to see some of these effects:

💡 CSS transformations work great alongside the transition properties you’ve already learned about, since they make the transformations smoother. The following demos will make use of transform and transition together.

While there are obviously a world of possibilities here, I want to focus on a handful of common use cases.

• Create a speech bubble
• “Flip” a card
• Reveal more information
• Debugging transformations
• Learn more

Create a speech bubble

💡 You can also use rotate() to rotate an element on hover.

“Flip” a card

Reveal more information

💡 You can also use translateY() to make it look like a button is bouncing when a user hovers over it.

Debugging transformations

Not all elements can be affected by CSS transformations. In general, inline elements (or those with display: inline applied to them), will not be affected by CSS transformations.

Learn more

• MDN’s description of the transform functionsFollowing and reading this link is optional.✳️

• MDN’s tutorial on CSS transformFollowing and reading this link is optional.✳️

• Intro to CSS 3D transformsFollowing and reading this link is optional.✳️