CSS3 2D Transformations A Look Into
The transformation module is a huge addition to CSS3, it takes the way we manipulate elements on a website to the next level.
There are a few experiments that really amaze me, but we will not create something like a pure CSS icon that can somehow turn into an Autobot, because it can be overwhelming and not quite usable in real life.
Instead, this time we’re going to take a step back and look at the basics of CSS3 2D transformations to see how it works at a basic level.
Syntax
Basically, the CSS3 transformation module allows us to transform an element to a certain extent, such as move, scale, rotate and tilt. The official syntax is transform: method (value). However, as with all the other great CSS3 additions that are still in their infancy, current browsers still need the syntax version to perform the transformations.
The method to which we refer above is also the transformation functions that could be replaced by one of the following methods: translate(), scale(), rotate() or skew().
Most of the value of the method corresponds to the X-axis and the Y-axis. If you remember the Cartesian coordinate system from your high school math classes, the basic principle is quite similar, the X-axis represents the horizontal line and the Y-axis represents the vertical line.
Except for rotations. The rotation uses the polar coordinates expressed in degrees in the range from 0 to 360.
The values for all methods can be both negative and positive. However, note that the web page is read successively from top to bottom, which makes the Y axis of the web opposite to the original principle of Cartesian coordinates. This means that if you add a negative value to the Y axis, it will be moved up instead.
Use of transformations
Now, let’s look at the following basic demonstration to see the Transformation in action.
I-Translate
Don’t be clouded by the term translate, no foreign language is translated. Translating here is actually a method for moving elements in one direction. The method contains two values; X and Y. the X value mentioned above takes the element horizontally. to the left or to the right, while the Y value brings it vertically down or up.
Alternatively, we can move the element in only one direction using these individual methods. translateX() and translateY(), the difference is that each of these methods accepts only one value.
In practice, transform:translate(-100px, 0) is also equal to transform:translateX(-100px) .
II-scale
The scaling method allows us to increase or reduce the elements from their actual size. The value of the scale is the same as in the translation method above, it also contains X and Y. the only difference is that we do not specify the unit.
It enlarges the div by 1.5 or 150% of its real size, and since we resize it in the same way for the X and Y directions, we just have to declare it in a value. You can also declare it this way transform: scale(1.5,1.5); if you want to go into more detail, it will do exactly the same thing.
Also, if we want to reduce the element, we would specifically use a value from 0.999 to absolute 0, as in the example below, thus reducing the size of the div by 50% or by half:
But be careful, if you set the value to absolutely “0”, the div simply disappears. So unless you have a valid reason to do it, I wouldn’t recommend it.
III-rotation
As mentioned in this article, the rotation method uses polar coordinates, so the value is given in degrees. Here are two examples
The following snippet Rotates the Div 30 degrees clockwise.
A negative value, as illustrated in the following example, rotates the Div to the same extent in the opposite direction (counterclockwise).
IV-inclination
Using the Skew method, we can create a kind of parallelogram. It also contains two values of the X and Y axes. However, the value itself is given in degrees, instead of linear measurements, as we use for the scaling method or the translation method.
V-Multiple Method
The transform property is not limited to handling a single method, but we can include multiple methods in individual declarations,
Transform the origin
The Transfrom origin is – as the name suggests-used to control the starting point of the Transformation. If we do not explicitly declare this property with the following syntax transform-origin: Xy; , then the browser takes the default value, which is 50% for the X and 50% for the Y.
Conclusion
We have gone through the four essential transformation methods; translate, scale, rotate and tilt as mentioned earlier, however, this module is still in its infancy. So, if you apply these methods on your next website, make sure that it is properly checked out for incompatible browsers.