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.
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.
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()).
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.
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:
- What is Modular CSS?
- How to use shadows in your CSS
- CSS Gradients: An Introduction
- On CSS Shorthand Properties
- CSS Inheritance in more detail
- How do CSS cascades work?
- Changing states using 2D CSS transformations
- Creating cool CSS button effects using transitions
- App performance is important! Media Queries!
- App performance is important! Shrinking files and optimizing images.