Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (10 exercises)
solution

Rotation and Alignment

Positioning and rotating the banner

It’s quite obvious that the banner should be rotated by 45 degrees.

Tailwind’s rotate-45 utility does exactly this, so let’s try add that to our anchor tag:

Rotation and alignment - wipLoading

Whoaaa, not what we wanted.

To be honest, I got stuck for a good while, trying to figure out how to position that rotated banner properly.

I try many different approaches. Transforms, magic number nudges, Flexbox, all the things.

I’ll spare you some time and cut straight to what I landed on.

Wait. I have already given you a really good hint, when we drew imaginary shapes around things. 👀

Aligning our parent and child shapes

Remember this image with our two imaginary shape boundaries?

Rotation and alignment - boundariesLoading

That’s right. We noted that the top-left and bottom-right corners of the container square were key meeting points between the two shapes.

Particularly the bottom-right. See, both shapes have their bottom-right corners in the exact same spot.

Let’s try align those!

The transform-origin property

When prototyping, I was trying to align my rotated banner with the bottom right of the container square.

What I realised later on is that the rotation was messing all my attempts.

See, by default, an element will rotate around its center when you apply a rotation transform utility.

Look at what happens when I iterate through various rotation utilities for our banner:

Rotate center

You can clearly see the shape pivoting around its center axis.

Just like if had put a pin right in the middle of the shape, and was pulling the edge of that shape to move it around the pin.

Because of this rotation axis, it’s very unpredictable to align the bottom-right-edge of both shapes together.

After a while, it hit me. I removed the rotate-45 class to align the two shapes without any rotation coming into play.

And it became pretty simple, conceptually.

Nested absolute elements

When an element with an absolute position has a child element, that child element will take that absolute parent as it’s relative.

In other words, position: absolute on an element resets the relative position for its children.

That’s great, because that means we can absolutely position our banner child to the bottom-right of it’s parent container, which is precisely what we want to do.

To be able to see what happens, I’ll also set the width of the banner to be a bit wider than its parent, with the w-40 class:

Note the bottom-0 right-0 classes. Since the banner width is wider than the container width, the banner will expand to the left of the container. We’ve explicitly asked it to be anchored to the bottom-right of it’s parent.

Rotation and alignment - wip2Loading

Bingo. The bottom-right corners of both our shapes are perfeclty aligned.

We’re making progress!

Re-rotating the banner

Now that we’ve logically positioned the banner within it’s parent, let’s try rotate it again.

As you already know, rotate-45 by itself won’t work:

Rotation and alignment - wip3Loading

Oooof. It’s all out of whack again.

But we know why! The banner is rotating through it’s center axis.

If you had a pin in your hand, and you could put it somewhere on that banner to determine the rotation axis, where would you put it?

(Please, don’t actually put a pin on your computer screen 😅)

That’s right - the bottom-right corner sounds like a pretty good place to pin the pin.

And luckily for us, one of Tailwind’s transform-origin values is… bottom-right!

That class is called origin-bottom-right, and it’s exactly what we need:

Rotation and alignment - wip4Loading

Holy smokes! It works perfectly!

Here’s what iterating over the rotation utilities with the origin-bottom-right set, just because it’s very satisfying:

Rotate bottom right

Wonderful! 🫠

No matter what rotation angle we set, our two shapes’ bottom-right corners are perfectly aligned.

We’ve just solved one of the sneakily difficult parts of building our ribbon banner.

Well done. Let’s take a sip of water, and keep going!

Transcript

The first thing we're going to do is give this anchor tag a width of w-40. That's going to help us visualize things a little bit better. Now the banner sticks out of the container square. That's on purpose so we can figure out where the edges should align.

Let's try rotate the banner. Then we'll try to do this bottom right edges alignment. I'll go with rotate. I think we can go rotate 45 degrees here. That's not looking quite like what we want just yet.

To be honest, when building this ribbon myself, I got stuck for quite a while trying to figure out a good way to rotate and position this element properly. I've tried magic numbers, flexbox, lots of things. I'll show the solution that worked great for me.

Let me remove the rotate-45 class for a second because that was one of the reasons why it got so complicated when I was prototyping this component. I was trying to position it while rotated. This really led to a lot of confusion. Let's position it first and then rotate it.

Let's try to line up these two bottom right edges, here and there, at the bottom of the container. The parent container, the square here, has a position of absolute. Inside of it, this element is a child.

If I give a class of absolute here, it will take its absolute parent, this element, as its own relative context, which means that I can position the element to the bottom right with bottom- and right-.

That's a great start. Now we can try rotate the element once again with rotate-45. We're still not quite there yet. If you look at how the element rotates, you might notice something. Let me change the value of the rotation. Let's go with rotate- to start with and then 3, 6, 12.

It looks like the rotation is happening right around the center of the element. Imagine if you had a pin and you put it right in the middle of this ribbon element. Then you took the edges and started moving them with your hands. It pivots around the center point. This is exactly what's happening because of the transform-origin property, which is set by default to center.

If you could take that pin away from the center of the element and place it anywhere you want it, where would you place it on the element to make the rotation happen like we want? Let's not actually put a real pin on our screen, please.

The bottom right of the element sounds like an ideal place to put that pin. We will put it right in the bottom right corner and then take the top left edge and pivot it around. If I type the word origin, you can see that we set it to origin-center. We have top, top-right, right, and bottom-right.

If I hit save, you might notice that now our bottom right corners are perfectly aligned. If I go through the rotation increments again with , 3, 6, 12, you can see that it's always right where it should be. If we go with 45, we have the perfect alignment that we were looking for.