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 we’ll be covering soon, 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

💡 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 functions ✳️
• MDN’s tutorial on CSS transform ✳️
• Intro to CSS 3D transforms ✳️