Transforms & motion path

transform

Applies a list of transform functions to a box. The functions are applied in order, so translate(10px) rotate(45deg) and rotate(45deg) translate(10px) give different results.

A <transform-list> is one or more transform functions separated by spaces. Any value other than none makes the box a containing block for its absolutely and fixed positioned descendants and creates a stacking context.

transform: translate(-50%, -50%) rotate(-3deg);

transform-origin

The fixed point that transforms happen around: the centre of a rotation or scale. One or two values set the x and y position like background-position; an optional third length sets the z position.

It also applies to the individual translate, rotate and scale properties. transform-origin: top left makes a box rotate around its top-left corner.

transform-box

Chooses the reference box that transform-origin and percentage values in transforms are measured against. It matters mostly for SVG elements, where the default measures from the SVG viewport rather than the shape itself.

For elements with a CSS layout box, fill-box is used as content-box, and stroke-box and view-box are used as border-box. So on HTML elements the default is the border box.

svg .gear { transform-box: fill-box; transform-origin: center; }

translate

Moves a box without writing a full transform. One value moves along x; two move along x and y; a third length moves along z.

The individual properties combine with transform in a fixed order: translate, then rotate, then scale, then the transform list. Because each is its own property, a hover rule can change one of them without repeating or undoing the others, and each can be transitioned on its own timing.

.card { rotate: -2deg; transition: translate 0.2s; }
.card:hover { translate: 0 -4px; } /* the rotation is kept */

rotate

Rotates a box. A bare angle rotates in the plane of the screen; an axis keyword (x, y, z) or three numbers giving an axis vector, followed by an angle, rotates in 3D.

rotate: y 180deg;

scale

Scales a box. One value scales both x and y equally; two scale x and y separately; a third scales z.

A percentage is the same as the matching number: scale: 150% equals scale: 1.5. A negative value mirrors the box in that axis.

perspective

Gives an element's children a 3D viewing distance, so their 3D transforms show depth: things further away look smaller. Smaller lengths give a stronger, closer effect.

The property affects the element's children, all seen from one shared viewpoint. The perspective() transform function affects only the element it is applied to.

perspective-origin

Where the viewer stands when looking at the 3D children of an element with perspective: the vanishing point. It takes a position like background-position.

transform-style

Whether an element's children share its 3D space (preserve-3d) or are flattened into its plane (flat). Use preserve-3d to build objects such as a cube from several faces.

Some properties force a flat result even when preserve-3d is set, because they need the element painted as one group first. Examples are opacity below 1, filter and overflow: hidden.

backface-visibility

Whether the back of a box shows when it is turned away from the viewer. Set hidden on both faces of a flip card so only the side facing the viewer is seen.

.card { perspective: 800px; }
.card-inner { transform-style: preserve-3d; transition: rotate 0.5s; }
.card:hover .card-inner { rotate: y 180deg; }
.front, .back { backface-visibility: hidden; }
.back { rotate: y 180deg; }

offset

Shorthand that places a box on a path: the path's start position, the path, how far along it the box sits and which way it faces, then after a slash the point of the box that sits on the path.

The ! after the first group means that group must not be empty: at least one of its parts has to be given. The motion path is applied as a transform, before the transform property and after the individual transform properties.

@keyframes along { to { offset-distance: 100%; } }
.dot {
  offset: path('M 0 0 C 100 0 100 100 200 100') 0% auto;
  animation: along 2s ease-in-out infinite alternate;
}

offset-path

The path a box is placed on. An <offset-path> is a ray(), a url() pointing at an SVG shape, or a basic shape such as path(), circle() or inset(). The optional <coord-box> sets the box that a basic shape is sized against.

offset-distance

How far along the path the box sits. Animate it from 0% to 100% to move a box from the start of the path to the end.

offset-rotate

Which way the box faces as it sits on the path. auto turns it to follow the direction of the path, reverse turns it the opposite way, and an angle adds a fixed rotation, on its own or on top of auto or reverse.

A bare angle such as 0deg keeps the box upright whichever way the path turns.

offset-anchor

The point of the box that is placed on the path. auto uses the transform-origin point, which is the centre by default.

offset-position

The starting point of a path that has no start of its own, such as a ray(). auto starts from the box's own position; normal starts from the centre of the containing block; a position places it in the containing block.