HTML Dog
Skip to navigation

Transformations

A woeful mega-budget Michael Bay movie about CSS?! Nay, the powerful manipulation of the shape, size, and position of a box and its contents using the transform property.

By default, CSS boxes, those visual representations of HTML elements, are so square. Rectangular, at least; level, with four straight sides and four boring right angles. But with the use of transform you can stretch and mold those boxes into all manner of shapes.

Manipulating a box over two dimensions, transform can be used to rotate, skew, scale and translate a box and its contents.

The four basic 2D transform functions — rotate, skew, scale, and translate.

Rotating

The following would result in a square orange box with all of its contents — text, images, whatever — obediently standing to attention:


.note {
    width: 300px;
    height: 300px;
    background: hsl(36,100%,50%);
}

But you can spin those soldiers around by adding a further declaration:


transform: rotate(-10deg);

This will turn the box and, importantly, everything in it, ten degrees anti-clockwise.

Skewing

Skewing allows you to tip the horizontal and vertical so the following…


transform: skew(20deg,10deg);

…will tip over the x-axis by 20 degrees on the y-axis by 10 degrees.

You can also specify one angle, such as skew(20deg), which is the equivalent of skew(20deg,0).

Scaling

Obviously, you can change width and height properties on a box, but that won’t affect the size of anything inside it. Scaling, however, will multiply not only the width and height, but the size of everything contained in the box as well:


transform: scale(2);

This will multiply the size by two. You can use any positive number, including a value less than “1”, such as “0.5”, if you want to use a shrink ray.

You can also scale the horizontal and vertical dimensions separately:


transform: scale(1,2);

This will leave the horizontal as is (because it’s a scale of 1) and multiply the vertical by two.

Translating

You can shift a box horizontally and vertically using transform: translate:


transform: translate(100px,200px);

Similar to position: relative; left: 100px; top: 200px;, this will move a box 100 pixels to the right and 200 pixels down.

Combining transformations

Want to rotate and scale at the same time? You crazy kid. You can do this by simply separating values with spaces, such as:


transform: rotate(-10deg) scale(2);

Alternatively, you could use the matrix function. matrix does the whole lot - rotating, skewing, scaling, and translating. It takes six values:


transform: matrix(2,-0.35,0.35,2,0,0);

These values aren’t entirely straightforward and involve maths (or just one math if you’re of the American persuasion) that, if you really want to tackle (there are benefits not only in brevity but also in precision), it may be worth giving the specs a gander.

Origin

There’s one important aspect missing. If you are transforming a box, there is a further parameter involved: the origin of the transformation. If you are rotating, for example, it will, by default, turn on the point that is the center of the box; if you had a piece of card, stuck a pin right through the middle of it, and then stuck that to your forehead (don’t do this), the card would spin from the middle. You can change where in the card the pin is stuck with transform-origin, however:


transform-origin: 0 0;

This example will tell the box to transform (rotate, in the previous example) from the top left, the first “0” being horizontal, the second being vertical. These values could be different, of course — like all other x-y, and you can use the usual center, top, right, bottom, left, length and percentage values, including negatives.

The same clockwise-rotated box with different transform origins.