Transforms

The transform functions

<style>
  .demo > div { display:inline-block; background:#4338ca; color:#fff; padding:18px;
                margin:14px; border-radius:10px; }
  .r { transform: rotate(-8deg); }
  .s { transform: scale(1.2); }
  .k { transform: skew(-10deg); }
</style>
<div class="demo">
  <div class="r">rotate</div>
  <div class="s">scale</div>
  <div class="k">skew</div>
</div>

Each box gets a different transform function: .r uses rotate(-8deg) to tilt counter-clockwise, .s uses scale(1.2) to grow 20% bigger, and .k uses skew(-10deg) to slant like italic. A key detail: transforms are purely visual — the box moves, grows or tilts, but the space it originally occupied stays reserved, so neighbouring elements do not shift around. That makes transforms safe and smooth for hover effects.

Transform + transition = motion

A transform on its own changes an element instantly. Pair it with a transition (from the last lesson) and the change becomes smooth movement. The example below makes an image gently zoom and tilt when you hover it — read it, then see how the two pieces work together:

<style>
  .zoom { transition: transform .3s; border-radius:10px; }
  .zoom:hover { transform: scale(1.15) rotate(2deg); }
</style>
<img class="zoom" src="https://picsum.photos/200/120" alt="zoom on hover">

On its own a transform snaps instantly; pairing it with transition makes it move. Here .zoom has transition: transform .3s, and on :hover it applies transform: scale(1.15) rotate(2deg) — two functions in one value, so the image grows 15% and tilts 2° at the same time. The transition makes that happen over 0.3s, giving the smooth gallery “zoom” you see on photo sites. Hover the image to try it.