Transform

Last chapter mentioned we had two more properties to go that could do massive changes to your design with just one line. Then I explained the filter property that applied nice visual effects to the image, changing the (color) appearance of the whole element.

This chapter is about the second thing you could do: changing the dimensions and position of the element at will.

This is done with the transform property.

What’s the difference with the properties we already learned for position and size? There are a couple of key differences.

• It’s only a visual change: behind the scenes, the old box is always maintained, so page flow never changes.
• Because of that, it can be much more powerful.
• Which means it also allows a few things that nothing else in CSS can obtain.

You can use this in grand applications, creating a very dynamic website or one that looks 3D. In most cases, however, it’s used in subtler ways.

Transforms

Again, if you ever worked with design software (either 2D or 3D), you’ll know what transform means. It is the set of properties that entirely decide how an object is placed inside a space. It has 4 key properties.

• translate(x,y): change position
• rotate(angle): rotate around the center of the element
• scale(x,y): grow and shrink size
• skew(x-angle,y-angle): distorts the element by moving the two opposing edges in different directions.

All of these have a 2D and 3D variant, except skew.

The 2D version is the default. For the 3D version, add 3d to the name, and the z axis as the third parameter. For example, translate(x,y) becomes translate3d(x,y,z)

Also, these values set all the axes at the same time. You can always transform axes separately by adding the axis name (as a capital letter) and only supplying the value for that axis. For example, translate(x,y) becomes translateX(val)

Translate

This moves an element from its original position.

Notice, in the example, how I can just move the image anywhere—but nothing responds to the change.

Rotate

This rotates an element around its center.

Granted, this isn’t useful for any text, as it just becomes unreadable. But rotating images or decorative elements can be crucial to creating a unique design.

Scale

This scales an element relative to its original size. This scaling also happens around its center point.

A value of 1 means it stays the same. Smaller values mean a smaller element, bigger values a bigger element.

In the example below, hover over the image to see the scaling animation.

Skew

Really, the skew effect must be seen rather than explained. As I said, not that useful in most cases, but I wanted to add it for completeness’ sake.

Multiple Transforms

Just like with filter, you can combine any number of transforms (on the same element) by providing them as a spaced list.

Conclusion

This concludes our chapters about how you control the location and dimensions of any element (or group of elements). With these tools, you’ll be able to build the overall skeleton or template of your website.

You’ll be able to put blog articles into a grid. Or stick the header to the top of the screen at all times. Or set the whitespace (padding + margin) for all elements to space them out correctly.

These properties are enough to get a website that is 80%–90% there. Because all the building blocks have the right shape and size, and they are all in the right place.

You also already learned many cool ways to make your website responsive and to animate elements. (For example, by changing the transform or adding a filter whenever somebody interacts with the element.)

Now, we will look at the actual content of those boxes. The background and foreground (text).