Web Development: CSS Transforms: The Old the New and the Remarkable

Friday, March 11, 2022

CSS Transforms: The Old the New and the Remarkable

CSS Transforms have been around for a while now and are supported by all major browsers. However, people often think they’re only good for rotating or skewing. That’s very far from the truth! In fact, you can do amazing things with CSS transform, as you’ll learn from this course.

Together, we’ll discover some remarkable ways to use the translate, scale, rotate, skew and the transform-origin properties.

4 CSS Transform Functions

First I’ll give you a quick introduction to CSS Transforms and tell you what they’re all about, in case you’re new to this topic. After that we’ll dive into 4 specific transform functions, and in each case we’ll discuss the syntax, basic usage, and also some remarkable uses you might not have thought about.

Source Files

Follow along with the course by forking and experimenting with the pens found in this Codepen collection.

In This Course

The following lessons are included in this course:

1. What CSS Transforms Are All About

CSS Transforms is a module inside CSS that defines how elements can be transformed in both 2D and 3D space by changing the shape and position. That happens by modifying the coordinate space, without affecting the normal document flow. What does that mean? In this section I’ll give you a quick example.

2. Translate

Let’s talk about the translate function value. Translating an element is probably the most common CSS transformation because it’s very straightforward. Let me show you how to use it with (among other examples) this pricing table:

3. Scale

Alright, let’s talk about scale and we’ll start by taking a look at the definition. Check out this demo of what transform scale can achieve with some stylish hover effects:

4. Rotate and Transform-origin

The third transform type on our list is rotate and, as the name suggests, you can use it to rotate elements. Let me show you how.

5. Skew

The fourth and final transform function is skew() so in this lesson I’ll show you how to use it.

Conclusion

Well there you have it! We played around with different CSS Transforms, we learned about the basic syntax, basic usage, and also some more interesting uses for these transformation types.

I hope you can draw some inspiration from the examples I showed you, and that you can use some of the techniques I showed you in your own projects.

Learn more about CSS with more tutorials and courses on Tuts+!