CSS Transformations

Chapter 36 2 mins

Learning outcomes:

  1. Introduction to CSS Transformations
  2. The transform property


With the advent of CSS3 Transformations, a whole new array of possibilities sprung up in the world of web designing. It came with a whole bucket full of useful properties allowing developers to translate, rotate, skew and scale elements.

Not only did the discussion stop here but went as far as bringing 3D into the game as well. CSS transformations can visualise a webpage as having 3 dimensions and consequently alter elements in 3 dimensional matrices.

CSS transformations meant that we could carry out many tasks in webpages that couldn't have been either at all accomplished using other CSS properties, or if they could, they couldn't be accomplised in an efficient, performance-concerned way.

For instance take the example of moving an element around in an HTML document - what options do we have? We can use margin properties (margin-left etc.) or positional properties (top, left and so on). The latter would've been definitely much performant as compared to the former however with transformations there is yet an even better option - translations. More on it later.

This was an example for something which can be done better using CSS transformations as compared to other properties. But what about something that can't be done at all using any other property, like rotation. How can we even imagine of rotating anything on a webpage without using the rotate() function.

Hence it turns out that CSS transformations are a major development in the field of web designing and there is so much to them that we have a whole dedicated unit to learning them!

In this unit we will be looking specifically and seperately over the following types of transformations:

  1. Translations
  2. Rotations
  3. Skewing
  4. Scaling

and then finally we will take a detailed look at the 3D models of all these types.

There is definitely a lot to cover in CSS transformations, but the best thing is that they are super easy to understand. Added to this for some of us - the math people - these transformational concepts aren't any new; we've already done them in graphs and matrices and have at least a general level of understanding of them.

The heart of transformations

The heart of transformations in CSS, without which we can't really produce all this potential, is the transform property.

It takes <transform-function> type values, that are returned by functions defined in the specification of CSS transformations. Each of the list above on the types of transformation, has its own set of functions for example the functions rotate(), rotateX(), rotateY() and rotateZ() all are responsible for rotating elements on an HTML page. There are so many functions made for this single transform property that we need a good amount of time frame to cover and understand all of them.

What the functions take i.e require as input, differs from function to function as we will show in each of the coming chapters. For now just understand the fact that the transform property can take functions as values only, no direct values.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage