CSS Transform Property: Four Common Uses

The CSS transform property allows a developer to perform a number of different actions on an element that changes how that element appears in the browser.  While the realm of possibilities for what you can do with one or more of the transform values is very large, here are some common uses to save time on your next project.

Centering Icons Vertically (or Horizontally)

The first example of a CSS transform value I want to look at is translate().

Let’s talk about the translate() CSS transform

What translate() allows us to do is move an element around without affecting the normal flow of the document.  If you have two elements next to each other and you apply a margin-left value to the element on the left, it will push both elements over to the left.  Margin affects the normal flow of the document.  If you would like to move one of the elements without affecting the positioning of the elements around it, that’s where you can use translate().

One thing to note first is how percentages work.  Percentages when used as your values for things like margin or width are calculated based on the parent element’s width, so if I have a container that is 400px wide and I tell a child element of that container to be 50% width or have a left margin of 50%, both of those values would be calculated as 200px.  However, when using a translate() rule, percentages are calculated based on that element’s width.  Take a look at the code below.  I’ve put two paragraph elements into a container that is 600px width, and defined them to be 50% width (300px).  I’ve set margin-left: 50%; on the first paragraph and transform: translateX(50%); on the second, which shows the first paragraph being pushed over by 300px, but the second paragraph is only push over by 150px.

See the Pen
Percentage Showcase by Zach Handing (@zachhanding)
on CodePen.

Positioning that icon!

With that in mind, let’s look at positioning any size icon to center itself vertically in its container.

Let’s say we have list of links, and we want to put an arrow icon in each link to give another visual cue that it will take the user somewhere.  In this case, that icon provides no semantic meaning to the element; it just adds to the design.  We can add that icon with CSS instead of putting it in the markup.  Now we can absolutely position the icon to be on the right, but how do we make sure it’s perfectly centered vertically?  If we know the height of the icon, we can add a top value of 50% and then subtract half the height of the icon, but what if we put in a new icon or use this component somewhere else with different values? We don’t want to hard-code the positioning values.

If we combine the top positioning of 50% (to get the top of the icon to be centered vertically), we can then combine that with a translate value to move the icon up half of its height and not have to worry about what that height value is.

a::after {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

See the Pen
Transform: Translate by Zach Handing (@zachhanding)
on CodePen.

And now our icon is perfectly vertically centered in the link.

Take a look at Developer Tutorial: How to Make a Triangle with CSS to see how I made that icon using only CSS!

Expanding or Contracting Size with a CSS transform

Now let’s look at the transform value scale().  If we apply a scale transform to an element, we change its size.  Just like with translate(), scale() adjusts the size of the object relative to its own width or height.  This is useful when doing simple hover states if we want to make the element pop out a bit.  The values used for scale() can again be percentages, or a 0-1 scale (0 being 0%, 1 being 100%).  The example below shows the cards increasing to 110% their original width and height when hovering over them. It also couples with the transition property to become a seamless animation.

li:hover {
    transform: scale(1.1);
    transition: transform 144ms ease-out;
}

See the Pen
Transform: Scale by Zach Handing (@zachhanding)
on CodePen.

The best part of scale() is that since we are not adjusting the width or height value for the cards, the other cards do not get pushed around by the change in size!

Flipping an Element Around

Our next use case of a CSS transform will dive deeper into how scale() works, by adding two important bits of information:

1. You can choose to only scale specific axes by using scaleX() or scaleY()
2. You can use negative values!

When using a value of -1 inside scale(), it tells the element to scale all the way down to zero, and then come out the other side back up to its original size…but now it’s backwards!  This is incredibly useful if by allowing us to utilize one icon in multiple directions!  Take a look at the code snippet below to see how we can take a right-facing arrow (or in this case hand), and make it point to the left.

img:hover {
    transform: scaleX(-1);
}

See the Pen
Transform: Scale Flip by Zach Handing (@zachhanding)
on CodePen.

Rotating an Element

The last example I want to go over is probably the most used. This takes flipping an element around to the next level.  Instead of mirroring an element, you can use the rotate() CSS transform to spin it at any angle you’d like.  Here we are looking at an accordion with arrow icon on the right side like our other example.  When the accordion item is opened, we rotate the icon 90 degrees.  Since this is in combination with our translate example, you can see how combining multiple transforms is also possible.

.btn-link {
    &::after {
        transform: translateY(-50%);
    }
  
    &.collapsed::after {
        transform: translateY(-50%) rotate(-90deg);
    }
}

See the Pen
Transform: Rotate by Zach Handing (@zachhanding)
on CodePen.

And there we have four common uses for the transform() property in CSS.  Share in the comments if you have any other creative ways to use it!