Transform

Introduction

Developers like to be creative, and sometimes they like to play around with the structure. Most of the time it requires transforming things. Transformation comes in several flavors depending on the context of your work. This topic will be focused on CSS transformation and how that could help you get some interesting visual manipulations to create an impressive and dynamic user interface for your web pages.

The Art of Transformation or Becoming an Alchemist

Being an Alchemist isn’t easy, but the hard part (actually getting down to study the art of transforming things) is over. From now on, you will be learning a lot of things that will help you become a great Alchemist. Let's start by learning the fundamentals that every apprentice should know.

Knowing the name of things will help you control them, so the first name we will learn is 'transform'. This CSS property will allow you to start creating those amazing transformations that were mentioned earlier. Every transformation should start with the transform property that allows you to make visual manipulations with elements. With it you can change objects or move them around.

The simple structure to start transformation is:

.water {
  transform: ...
}

It is still incomplete, though, and it needs some additional values so it can actually transform the target elements. There are 4 basic CSS functions that can be used with the transform property:

• translate()

• rotate()

• skew()

• scale()

This time we will focus on the first 2 functions and the remaining ones will be explored in the future. As a quick note: CSS functions are just property values used along with the CSS properties. The ones above are meant to be used with the transform property to indicate what kind of transformation you need. The next step is to learn how to combine those CSS functions with our CSS property.

Transform property allows for both 2D and 3D manipulations. In this topic, we will discuss the former ones and start paving our way to the latter ones.

The 'origin' of transformations

There is something important that should be understood first to avoid things like trying to transform copper into gold and all that kind of heretic stuff later. All transformations are bound to a coordinate system whose origin (0, 0) is by default the center of the element that you want to transform. This means that the transformations are done based on the center of the element. See the image below.

Here the blue block is the element and the cross in the center indicates the origin of the transformation. Imagine you want to translate this element, so the transformation is like grabbing the entire element by that origin place and applying the translation from there:

As you can see, the transformation is done from the origin of the element, in this example, we used the translate CSS function but the same concept applies to other properties' values. It is important to note that the origin of the element is not the same as the one that is calculated using other CSS properties like left, right, top, and bottom. Those are being measured according to the position of the element. Do not worry about this right now. Just keep in mind that transformations are based on the origin of the element itself, which is in its center. However, the origin can be changed to a different part of the element other than the center. We will look into that in future topics.

Creating a proper transformation spell: Translate

Among the fundamentals that every Alchemist should know of, there is the ability to translate elements from one place to another. For this, you need to learn the powerful CSS function, the magic word translate(). You use it by indicating the exact place you want the element to be in. Only keep in mind that the first number is for locations over the horizontal axis (“x”) and the second one is for locations over the vertical axis ("y").

The way it is used is as follows:

.water {
  transform: translate(10px, 20px);
}

Now it is complete, and it does exactly what it states. With transform and translate() the element with the class water will be translated to the position (10, 20) measured in pixels. Well, you might ask, what is the starting point for these measurements? That is a very important question. As it was mentioned before, that point is the origin which by default is the center of the element.

Also, in the example above we used pixels but you can use any other units allowed in CSS, like em, rem, pt, and %. The most common of them are pixels and percentages (%). So, how does the percentage unit work here? Well, just remember that transformations are applied taking into account only the element that is being used, the same idea goes for the relative units, they are calculated respectively to the transformed element.

As the transformation is applied based on the element itself, with units it's the same thing.

.water {
  width: 200px;
  height: 300px;
  transform: translate(10%, 20%);
}

For the example above, it is the same as the following:

.water {
  width: 200px;
  height: 300px;
  transform: translate(20px, 60px);
}

You can see that 20px is calculated based on the width. 10% of 200px gives us 20px. The same operation can be applied to get 60px (300 x 20%).

Let’s review another example, shall we?

<div class="water"></div>
<div class="ice"></div>

.water {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: mediumaquamarine;
  width: 200px;
  height: 200px;
}

.ice {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: cornflowerblue;
  width: 200px;
  height: 200px;
  transform: translate(10%, 30px);
}

Here's what the result looks like:

Isn’t it amazing? We've created two elements from nothing using just a couple of CSS properties. What a powerful spell, don’t you think? And not only that, we've translated one of them too. Feeling powerful already?

Make it turn: Rotate

You have traveled far now and learned a lot on your way to becoming a true Alchemist. So far, you know that some spells can be cast for translating things around. Let’s add another wonderful spell to our inventory.

As the earth translates, it also rotates. Wouldn’t it be awesome to know how to make things rotate? Well, for that there is another beautiful CSS function: rotate(). With it, using the CSS property transform you can rotate things by stating the angle. An angle with a positive value will rotate the element clockwise, and, as you can imagine, an angle with a negative value will rotate it counter-clockwise.

Let’s take a look at the following example:

.water {
  transform: rotate(45deg);
}

That is all that we need to rotate elements. In the example above we used degrees. You can use other units to indicate the angle of rotation, but we'll discuss them later.

The angle is measured from the horizontal axis of the origin, which is by default the center of the element. Let’s take a look at the image below to get a better understanding:

The CSS that will produce the image above is the following:

.water {
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: mediumaquamarine;
  width: 200px;
  height: 200px;
  transform: rotate(60deg);
}

Another amazing thing about transformation is that different functions can be mixed and used at the same time. For example:

<div class="water"></div>
<div class="ice"></div>

.water {
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: mediumaquamarine;
  width: 200px;
  height: 200px;
  transform: translate(10%, 30px) rotate(60deg);
}

.ice {
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: cornflowerblue;
  width: 200px;
  height: 200px;
}

And here's what we'll get as a result:

More examples

The following examples are created using some of the fundamentals that we've learned before.

Would you like to create a post-it note-like image?

<div class="postit">
  <div class="shadow"></div>
  <div class="sheet"></div>
  <div class="tape"></div>
</div>

.postit {
  position: absolute;
  top: 100px;
  left: 100px;
}

.shadow {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #c9c9c9;
  transform: translate(4px, 4px);
}

.sheet {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: beige;
}

.tape {
  position: absolute;
  left: -30px;
  top: 10px;
  width: 110px;
  height: 30px;
  background-color: rgba(125, 125, 125, 0.3);
  transform: rotate(-45deg);
}

See the result for yourself:

What about a CSS television?

<div class="tv">
  <div class="box"></div>
  <div class="screen"></div>
  <div class="base"></div>
  <div class="support"></div>
  <div class="antenna">
    <div class="stick stick-left"></div>
    <div class="stick stick-right"></div>
  </div>
</div>

.tv {
  position: absolute;
  top: 100px;
  left: 100px;
}
.antenna {
  position: absolute;
  left: 75px;
}
.stick {
  position: absolute;
  width: 2px;
  height: 50px;
  background-color: #c9c9c9;
  top: -43px;
}
.stick-left {
  left: -17px;
  transform: rotate(-45deg);
}
.stick-right {
  left: 16px;
  transform: rotate(45deg);
}
.box {
  position: absolute;
  background-color: black;
  width: 150px;
  height: 100px;
  border-radius: 8px;
}
.screen {
  position: absolute;
  width: 130px;
  height: 80px;
  background-color: #284055;
  left: 10px;
  top: 10px;
  border-radius: 8px;
}
.base {
  position: absolute;
  top: 100px;
  left: 65px;
  background-color: black;
  width: 20px;
  height: 10px;
}
.support {
  position: absolute;
  top: 110px;
  left: 55px;
  background-color: black;
  width: 40px;
  height: 10px;
  border-radius: 8px;
}

Here it is, just like a real one!

Conclusion

Transformations are key to creating more dynamic user interfaces. With them you can not only enrich the experience for your users but also convey messages in a more impactful way. Now you can translate and rotate elements! You can do so independently by applying only one of these functions, or you can use them both at the same time.

Your limit is defined only by your creativity. However, as you might have heard already, with great power comes great responsibility. Be careful with how you use transformation. If you overdo it, you could harm the usability and accessibility of the site you are working on.