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.
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.
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:
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.
The fourth and final transform function is
skew() so in this lesson I’ll show you how to use it.
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+!
- CSSHow to Create Fluid Typographic Scales for Your Responsive WebsiteAdi Purdila
- CSSCreate Beautiful Scrolling Animations With the CSS Clip-Path PropertyGeorge Martsoukos
- CSSHow to Handle Text Overflow (with a CSS Ellipsis)Adi Purdila
- CSS SelectorsHow to Build a Simple Theme Switcher With the CSS Checkbox HackGeorge Martsoukos
- CSS Grid LayoutCSS Grid vs. Flexbox: Which Should You Use and When?Anna Monus
- CSSQuick tip: How to Make Elements Resizable with CSS ResizeAdi Purdila
- CSSSmart Sizing in CSS With Container Query UnitsAdi Purdila
- CSSSuper Short CSS Selectors With :is() and :where()Adi Purdila
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly