Ahmed Bouchefra - Modern CSS

In this article, well learn how CSS transforms can be used in the real world to solve various tasks and achieve interesting results. Specifically, youll learn how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.

Transformations of HTML elements became a CSS3 standard in 2012 and were available in some browsers before then. Transformations allow you to transform elements on a web page as explained in our 101 article on CSS transforms. You can rotate, scale, or skew your elements easily with just one line of code, which was difficult before. Both 2D and 3D transformations are available.

As for browser support, 2D transforms are supported by all major browsers including Internet Explorer, which has had support since version 9. As for 3D transformations, IE has only partial support since version 10.

Any web designer knows how tedious it can be to vertically align elements. This task may sound very simple to a person whos not familiar with CSS, but in reality theres a jumble of techniques that are carefully preserved between generations of developers. Some suggest using display: inline with vertical-align: middle, some vote for display: table and accompanying styles, whereas true old school coders are still designing their sites with tables (just joking, dont do that!). Also, its possible to solve this task with Flexbox or Grids, but for smaller components, transforms may be a simpler option.

Vertical alignment can be more complex when element heights are variable. However, CSS transformations provide one way to solve the problem. Lets see a very simple example with two nested divs:

Nothing complex: just two nested blocks with a Lorem Ipsum text of different length.

Lets set width, height, and border for the parent, as well as some spacing to make it look nicer:

Also, enlarge the children font size a bit:

As a result, youll see something like this:

And now your customer says: Please align the text vertically so that it appears in the middle of these red boxes. Nooo! But fear not: were armed with transformations! The first step is to position our children relatively and move them 50% to the bottom:

After that, apply a secret ingredient the translateY function which will reposition the elements vertically:

So, whats happening here? top: 50% moves the top of the child element to the center of the parent:

But this is not enough, because we want the childs center to be aligned with the parents center. Therefore, by applying the translateY we move the child up 50% of its height:

Some developers have reported that this approach can cause the children to become blurry due to the element being placed on a half pixel. A solution for this is to set the perspective of the element:

This is it! Your children are now aligned properly even with variable text, which is really nice. Of course, this solution is a little hacky, but it works in older browsers in contrast to CSS Grid. The final result can be seen on CodePen:

Another very interesting use case for transformations is creating speech bubble arrows that scale properly. I mean, you can definitely create arrows with a graphical editor, but thats a bit tedious, and also they may not scale well if you use a bitmap image.

Instead, lets try to stick with a pure CSS solution. Suppose we have a box of text:

It has some generic styling to make it look like a speech bubble:

Im using rem units here so that if the roots font size is changed, the box is scaled accordingly.

Next, Id like to make this bubble become more bubble-ish by displaying an arrow to the right. Well achieve that by using a ::before pseudo-selector:

The larger the width and height you assign, the larger the arrow will be.

Now move the arrow to the right:

Currently, however, this element doesnt look like an arrow at all:

Lets align this small box vertically. As long as its dimensions are static, this is a simple task:

It is not precisely aligned, but well fix that later.

Now its time for transformation to step in. All we need to do is rotate this small box to turn it to a triangle, which will look just like an arrow:

Heres a screenshot from the developer console (the box is highlighted with blue so you can see how its actually positioned):

Then, just move the arrow a bit to the top using negative margin so that its positioned precisely at the middle of the box: