Transforms

A transform changes how an element is drawn: it moves, rotates, enlarges or skews it. Its place in the layout does not change — the neighbours notice nothing. That is why transforms are fast and great for animations.

Moving

The transform property takes one or more functions. translate(x, y) moves an element horizontally and vertically:

<style>
  .box { width: 120px; padding: 12px; background: lightskyblue; }
  .moved { transform: translate(60px, 10px); background: gold; }
</style>
 
<div class="box">In place</div>
<div class="box moved">Moved</div>
<div class="box">The neighbour did not move</div>

The yellow block overlaps the lower one: for the layout it still stands in its old place.

Rotating and scaling

rotate() turns an element by an angle in degrees (deg); a positive angle is clockwise. scale() enlarges or shrinks: 1.5 is one and a half times bigger, 0.5 is half the size:

<style>
  .row { display: flex; gap: 40px; padding: 20px; }
  .row div { width: 70px; height: 70px; background: mediumpurple; color: white; display: grid; place-items: center; }
  .r { transform: rotate(20deg); }
  .s { transform: scale(1.3); }
</style>
 
<div class="row">
  <div>As is</div>
  <div class="r">rotate</div>
  <div class="s">scale</div>
</div>

All functions

Percentages in translate() are counted from the size of the element itself: translate(-50%, -50%) moves it by half of its own width and height.

Together with a transition

Transforms are animated most of all. Hover over the card:

<style>
  .card { width: 160px; padding: 16px; background: honeydew; border: 1px solid seagreen; transition: transform 0.3s; }
  .card:hover { transform: translateY(-6px) scale(1.05); }
</style>
 
<div class="card">I lift up</div>

translateY() moves only vertically; there is also translateX().

The pivot point

By default rotation and scaling happen around the center of the element. transform-origin moves the pivot point, for example to the top left corner:

<style>
  .row { display: flex; gap: 60px; padding: 10px 10px 50px; }
  .row div { width: 70px; height: 70px; background: coral; transform: rotate(30deg); }
  .corner { transform-origin: top left; }
</style>
 
<div class="row">
  <div></div>
  <div class="corner"></div>
</div>

The left square turned around its center, the right one around its corner, like a door on a hinge.

Separate properties

In modern CSS moving, rotating and scaling can be set with the separate translate, rotate and scale properties. They are handy to change one at a time, without rewriting the whole transform line:

<style>
  .box { width: 80px; height: 80px; background: steelblue; rotate: 15deg; transition: scale 0.3s; }
  .box:hover { scale: 1.2; }
</style>
 
<div class="box"></div>

On hover only scale changes, and the rotation stays.

Common mistake

The order of functions in transform matters: they are applied from right to left, and each one changes the coordinate system for the next. Moving after rotating sends the element off at a slant:

<style>
  .box { width: 60px; height: 60px; margin: 10px 0 40px; background: gold; }
  .a { transform: translateX(100px) rotate(45deg); }
  .b { transform: rotate(45deg) translateX(100px); }
</style>
 
<div class="box a"></div>
<div class="box b"></div>

The functions are the same, but the elements ended up in different places. If the result looks odd, try swapping the functions.