Transform

Moves, rotates and scales an element without disturbing layout. Check out the MDN for how to use.

transform is a shorthand here, not a property of its own: it is parsed into translate, translate-z, rotate and scale, which are what actually apply. Those four are also the ones a transition or a keyframe animates — see the notes.

:root {
  flex-direction: row;
  gap: 40px;
  padding: 40px;
  justify-content: center;
  background-color: #eef1f4;
  --tilt: 15deg;
  --lift: -12px;
}

.tile {
  width: 80px;
  height: 80px;
  background-color: coral;
  border-radius: 8px;
}

.a { transform: rotate(20deg); }
.b { transform: scale(1.3) translateY(-10px); }
.c { transform: rotateX(55deg) rotate(15deg); }
.d { transform: rotate(var(--tilt)) translateY(var(--lift)); }

Functions

• translate(), translate3d(), translateX(), translateY(), translateZ() — lengths or percentages of the element’s own size
• rotate() and rotateZ(), rotateX(), rotateY(), rotate3d()
• scale(), scale3d(), scaleX(), scaleY(), scaleZ()

transform-origin decides the point all of them work around, and none resets the lot.

matrix(), matrix3d(), skew(), skewX(), skewY() and perspective() do not exist — there is nothing behind this shorthand that could hold a shear or a projection. The perspective property does work, and is where a projection is asked for.

Notes

• The order of the functions does not matter. Repeats of the same kind combine — two translateX() add up, two scale() multiply, two rotations compose — but the three groups are then applied in a fixed order, scale first, then rotation, then translation. A browser applies the list left to right, so translateX(50px) rotate(45deg) and rotate(45deg) translateX(50px) differ there and are the same thing here.
• var() works anywhere in the value, including inside a function’s arguments. The substitution is textual and happens before the list is read, so a variable can hold an argument (translateX(var(--x))), both arguments and the comma between them, several whole functions, or even the function’s name. The value is re-read whenever one of the variables it names changes. As in CSS, a variable that is unset and has no fallback makes the whole declaration invalid rather than just its own function, so the element keeps no part of the transform.
• transition: transform 300ms works, and covers the four properties the shorthand writes. What is interpolated is each of them separately, though, not the transform list the way CSS defines it — notably a rotation travels through its Euler angles, so an animation between two three-axis rotations takes a different path than it would in a browser.
• translate-z takes a length only; a percentage is read as 0. A positive value comes towards the viewer, as on the web, so it draws larger under a perspective and moves the element along Unity’s negative Z axis — which is what puts one element in front of another in a world-space canvas. For ordering within a screen-space canvas use z-index.