You've seen how you can use relative positioning to move an element around on a page. The transform property is arguably a better vehicle for this, however, as it gives you more power over the movement and purportedly leads to faster animations.
The transform property accepts values of the following forms:
translate(offsetX, offsetY)scale(factorX, factorY)rotate(degrees)This list is abridged. Many related forms are available. The value translateX, for instance, moves an element horizontally only.
To examine each of these three transformations, consider first this pair of elements that is centered in the viewport using Flexbox:
Translation shifts a box horizontally or vertically. The direction of movement is determined by the sign of the offsets. Here the left box is pushed down 50 pixels, and the right child is pushed up 50 pixels:
The offsets are lengths and can have any of the usual units. Percentages behave a little differently than in other contexts. Usually percentages set a child's property to be some factor of its parent's property. For translate, the percentage is applied to the element's width and height. Try shifting the left child (which is cornflower blue) completely to the right of the right child using a percentage offset.
Transformations are often applied to add interactive animations. Here the translations are only applied when the body element is hovered with the mouse:
Try moving the mouse anywhere over the Preview panel.
Scaling grows or shrinks the box about its center. The factors are specified as unitless proportions. Hover over one of these boxes and it will grow:
Try making the boxes shrink instead.
Rotation turns an element about its center. The amount of rotation is a CSS angle, which has units deg, rad, or turn. Positive numbers turn the element clockwise, which is perhaps contrary to the convention you may be used to. However over one of these boxes and it will turn 15 degrees clockwise:
Try rotating the boxes an eighth of a turn.
Multiple transformations can be applied by listing them as a space-separated sequence. Hover over one of these boxes to see it grow and spin:
Note that there is no comma separating the transformations.
Try switching one of the transforms to a translation. Does the order of the transformations matter?