We’ve seen so far how CSS allows us to apply colors, set fonts, tweak the text settings, position elements, space them, decorate them, move them around.
CSS transforms are a collection of functions that allow to shape elements in particular ways:
- translate: moves the element along up to 3 axis (x,y and z)
- rotate: moves the element around a central point
- scale: resizes the element
- skew: distorts the element
There are 3 CSS transform properties available:
transformdefines which transform function to use (translate, rotate, scale…)
transform-originallows to modify the origin point of a transformation (works like background positions)
transform-styleis for 3d settings
Note that unlike
transform is not a shorthand property.
We’ll only use
Doesn’t break the Flow
To prevent unexpected behavior, transformed elements do not affect the Flow. Whether rotated, scaled or translated, they won’t affect other elements.
translate() function allows to move an element across the plane (on the x and y axis). It accepts either:
- 1 parameter: moves the element along the
- 2 parameters: first value is for the
xaxis, second for the
It’s like using relative positioning with
Let’s redo our circuit animation using translation instead of left/top positioning:
transform is the CSS property,
translate() is the CSS value attached to that property (and also happens to be a function).
You can use
translateY() to only move your element along the x and y axis respectively.
rotate() function allows to make an element revolve around a fixed point. By default, it revolves around the element’s center. Think of it as vinyl being played on a turntable.
rotate() accepts only 1 parameter, which is an angle value defined in degrees
rad or turns
turn (with 1 turn being equivalent to a full circle).
scale() function allows to resize an element. It can either expand or shrink it. The function accepts either:
- 1 parameter: the element is resized uniformily in height and width
- 2 parameters: the first value resizes the element horizontally, the second one vertically
The range of possible value is:
1: the element retains its original size
2: the element doubles in size
0.5: the element is half of its size
0: the element basically disappears (as its height and width are equal to zero)
-1: the element is mirrored
scale(1): normal size
scale(2): double size
scale(0.5): half size
scale(0): zero size (invisible)
scale() function has x and y versions:
scaleY() to resize horizontally and vertically respectively.
skew() function allows to distort an element, by dragging its sides along a line basically.
This transform function is rarely used, as its effects are quite unpredictable, and its results not necessarily appealing. Nevertheless, let’s see how it works.
skew() functions accepts either:
- 1 parameter: the element is distorted horizontally
- 2 parameters: the first value distorts the element horizontally, the second one vertically
skew() only accepts angle values like degrees
skew(0deg): no distortion
skew(10deg): subtle horizontal distortion
skew(45deg): quarter distortion
skew(90deg): half distortion (invisible)
skew(120deg): same as -60deg
We’ve seen how transform functions operate on a plane, along the x and y axis.
translate()with up to 2 parameters:
translateX()as x only
translateY()as y only
But all these functions also have a 3d version.
translate() has a
translate3d() version that performs transformation along 3 dimensions, which means it includes the z axis as well (and as such, a standalone
translateZ() function exists as well).
The z parameter basically make the element move closer and further, whether we increase or decrease its value. It’s like zooming in and out.
The green block rise
200px “upwards”, as if coming closer to us, along the z axis.
perspective: 500; needs to be applied to the parent element in order for the 3d space to become active. Alternatively,
transform: perspective(500px); can be used as well.