Rotating and Scaling with transform

In this lesson you'll learn how to rotate and scale using CSS's transform property, so you can transform an element without affecting the layout. This is for people searching "CSS transform usage."

Using the transform property lets you visually transform an element with rotate() (rotation), scale() (scaling), and translate() (moving). Its distinguishing feature is that it doesn't affect the flow of the layout (the position of other elements).

The sample code specifies transform: rotate(10deg) scale(1.1); on .card:hover, creating an effect where hovering the mouse causes a slight rotation combined with enlargement. Notice that you can specify multiple transforms at once, space-separated.

A common beginner stumbling block is that a transform doesn't affect the placement of surrounding elements. The element itself visually changes, but the other elements stay exactly where they were, as if nothing had happened there. This property is useful whenever you want to add a purely visual effect without changing the layout.

Combined with transition, you can even build a button that transforms smoothly when the mouse hovers over it. This is a technique frequently put to use in real UI design — a card's hover effect, an icon's animation, and more.