Skip to content

Changing states using 2D CSS transformations

CSS Tranforms

This article builds on the last one, and we we will learn how to make an element change its state using CSS transformations. Welcome and enjoy the article!

Introduction

We use transforms when we need to visually change the state of an element. This can be done by either rotating, scaling, skewing, or translating an element. Transforms modify the coordinate space of the CSS formatting model. A full list of all the CSS transforms can be seen here.

We can implement transforms by using a specific set of CSS properties, with which we can change the shape and the position of the element without disrupting the document flow. We trigger transforms on events – such as hovering an element or clicking with our mouse.

Transforms are really useful when we want to manipulate elements and to add visual enhancements. Donćt worry, we will learn all of this head-on by creating some basic divs and transforming them. So let us begin!

Transforms

Rotate()

The first transform function we will learn is the rotate function. The rotate function can, well, rotate an element either clockwise or counterclockwise around a fixed point on the 2D plane without deforming it. The amount of rotation is defined by an angle (transform: rotate(45deg)). The value of the rotate function can be any of the following units: degrees or deg, gradians or grads, radians or rads, and turns, although the most commonly used one is the degree unit.

Transform Rotate Effect
Rotate Effect
Rotate Code
Rotate Code

Scale()

The scale transform method can resize the element on a 2D plane, either vertically or horizontally. We can specify the scale method either with one or with two values, which represent the amount of scaling to be applied in each direction. If we set the value 3 as the scaling value, then the scaling method will increase the element three times the original size.

Scale Effect
Scale Effect
Scale Code
Scale Code

Skew()

The skew transform method tilts/skews the element on a 2D plane by distorting each point within the element by a certain angle either in the vertical or horizontal direction (or both). Skew() function, similarly to scale can be defined with either one or two values. We can also be more specific with the skew method by writing only the transform for the x-axis (skewX()) or the y-axis (skewY()).

Skew Effect
Skew Effect
Skew Code
Skew Code

Translate()

The translate method will move or reposition the element in either the vertical, horizontal, or both vertical and horizontal directions. This transform is specified by a two-dimensional vector, defining how much the element moves in each direction. We can set only one value, in which case the x-axis movement will be applied, and the y-axis movement will be set to 0 as the default, or both of them in which case we would have more control over the translation of the element.

Transformation Translate Effect
Translate Effect
Transform Translate Code
Translate Code

Prefixes

In order to make the transforms compatible with other browsers, we should use some prefixes, which would take into account various implementations of different features in those browsers. This answer on stack overflow explained in nice detail how to prefix your transforms depending on the browsers you want to support.

See the Pen
CSS 2D Transformations
by Mehmed (@brachika)
on CodePen.

Conclusion

With the last post, and this one you have a good foundation of both animations and transforms, which will help you make more interactive sites. We will definitely start using these in a more advanced way, so stay tuned for those blog posts!

And as always, if you liked this article, please check my articles posts on thedukh.com. For more CSS articles click on one of the links below: