Skip to Content

CSS transform and transform-origin

transform is a bit of a strange property

All CSS properties have a range of possible values, but transform is a little different than most, in that its values do completely different types of things. They are all related to transforming our selector, but it’s not really the same as color. Sure, color allows us to set pretty much any color we want, but all of them are just setting a color.

With transform we can do the following:

And other than rotate, the above are all shorthand values as well, we can scaleX or translateY, for example, with X and Y indicating the axis.

On top of that, it opens up access to 3D functionality as well, which I won’t be looking at specifically in this post, but I did create a fun 3D card using it in this YoutUbe video. When dealing with 3D, we also have the perspective value to play with, as well as the Z axis, so you can do translateZ for example.

There is also the matrix value. It’s basically opening up all of the above into one single value. If you want to know about how that one works, read this really good article on it because it hurts my head trying to think about it, never mind write about it.

The above values are pretty self-explanatory, but if you’d like a deep dive into them, the below is an embedded Scrimba video that dives into the specifics of each and how it works. You can pause the video at any time and change and play with the code, and then hit play to resume where you left off.

If the preview is covering the code in the Srimba below, you can move and resize it while the video is playing.

Using more than one transform at a time

Sometimes one of the above transitions isn’t enough, you want to do two (or more!). Luckily that’s super easy to do! It all needs to be done on one single line though, if you try something like this, it won’t work:

.my-selector {
  transform: translateX(50px);
  transform: rotate(45deg); /* only this one works */
}

That’s because we can’t declare a property twice. Or, well, you can, but the browser will always apply the second one, like if we tried this, our text would be orange.

.my-selector {
  color: blue;
  color: orange; /* text will be orange */

So, to apply multiple transforms, you need to put them on a single property and simply add in as many values as you want, all separated by a space.

.my-selector {
  transform: translateX(50px) rotate(45deg);
}

transform-origin opens up some extra doors.

All together, transforms allow us to do some really cool things, and when you add in transform-origin it opens up even more doors.

Let’s look at a basic rotate for an example, as I think that it is the easiest to understand. In the below CodePen, you can switch the transform-origin around and see how it affects the rotate that is on the square.

See the Pen transform-origin by Kevin (@kevinpowell) on CodePen.

Putting transform-origin to use

You might be wondering where transform-origin might be useful, other than some rare edge cases. It’s really nice when combined with transforms which are only on one axis (or at least I think so, hah).

Let’s say you have a button that only has a border, but when you hover on it, it fills with red. You could just turn the background on and off, but if we use a pseudo-element, we can add a transition to it to have it slide in. If we use scale(0,1) we are scaling it to 0 on the x-axis.

btn::after {
  content: '';
  display: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
  transform: scale(1,0).
}

On hover, you want to background to fill with red:

.btn::after {
  /* other styles */
  transition: transform 150ms;
  transform: scale(1,0);
}

.btn:hover::after {
  transform: scale(1,1);
}

This is fun, but then we can add transform origin to control if it’s sliding in from the middle (default), the left, or the right, as I did in the CodePen below.

See the Pen button bgs with transform origin by Kevin (@kevinpowell) on CodePen.

If you have any cool uses for transform and transform-origin I’d love to see them. Hit me up on Twitter and share away, whether it’s something you came up with or just a really cool use that you stumbled across!

Don't want to miss an article?

If you never want to miss out on any of my content? Subscribe to my newsletter!

It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

    We won't send you spam. Unsubscribe at any time.