The CodeWolf

Part 12 – Transformations in CSS

The long streak was broken finally as life simply had different plans for me! I stopped blogging on 14th October as I crash-landed into problems beyond control. But, I am finally back and have a ton of projects and blogs lined up!

A sneak-peek at the upcoming blogs and projects:

1. Learning CSS Series – Finale
2. Next to React – New ways to React
3. The Developer’s Dilemma – A video project capturing what makes a developer
4. Official CodeWolf Communication Platform – CodeWolf Howl
5. Carbon – A series on how to build skills needed by a Developer
6. Omit – Mistakes and learnings of a nobody dev

Transformations

In this topic, we will cover the following

1. Rotating, moving, skewing and scaling elements.
2. 3D transformations.

In CSS apart from styling, a major role is that of animating and transforming our content. Now there are various reasons why we could do that.

It could be simply transforming an element’s position, or making UI look dynamic, or simply creating more engaging content.

Transform

The transform property is used to transform our elements in accordance with the functions it has.

Transform can change how the elements will appear on a user’s webpage.

Rotate: 

1. As the name states the rotate function can rotate any element according to the values supplied to it.
2. E.g. transform: rotate(180deg);
3. By default it will rotate around the center of the element
4. This can be changed by using the transform-origin property
5. We can set the transform-origin to left, right, top bottom, center, left top, right bottom etc.
6. We can also use % , px and any other units for the same;
7. Rotate can also be called on any axis as rotateX, rotateY, rotateZ;

Translate:

8. The translate function value is used to change the positioning of the elements using transform;
9. This can also be done at any axis such as translateX,translateY,translateZ and unique transformation for 3d translations, as translate3d;
10. E,g  transform:translateX(1rem);
11. The axis of translation is directly related to the element in question. E.g if we rotate the element and then do translateX, the X axis will be in accordance to the rotated element and not the original element as shown below: 

12. Translate and rotate also get hardware acceleration in styling and hene are greatly recommended;

Skew:

13. The skew function as its name states will skew an element in a 2d plane.
14. By default skew will change the element across the x axis;
15. The way to apply it is simply as : transform: skewX(20deg)  skewY(30deg);

Scale: 

1. Scale is a function to resize the element or increase or decrease the actual scale of the element.
2. Scale function is applicable when we want to change the size of an element by a numerical factor.
3. E.g transform: scale(1.2);

Perspective:

1. The perspective function value changes the display perspective of an element.
2. It can make an element appear to be be closer or farther away from the perspective of a user’s screen.
3. This can be simply applied as transform: perspective(120px);

Transform-style

As seen when we use transform we can manipulate all the dimensions of an element.

This means an element can have a 3d or a 2d plane of existence.

While doing such transformations, we can choose to preserve the 3d style or change the style in accordance with 2d transformations.

To do this we can choose the transform-style property and can achieve the same.

E.g. 

transform-style: flat; transform-style:preserve-3d

Backface visibility

When rotating 3d elements, we can manually specify whether we want to see the face at the back of the transformation.

Consider a cube as seen below:

This is a cube created by CSS. As we can see above, the cube’s backward face is not visible.

This is probably because of the fact that we have set its visibility to false.

We can change this visibility by the following transformation:

E.g backface-visibility: visible/hidden;

Summary

We can summarize the transformations as following

It’s almost the end now! It has been almost half a year of blogging and this series will always be close to my heart. So get ready for the finale in the coming week and also a ton of new content showing up!

Discover more in the next blog!!

I keep on coding something cool, visit ankush.tech to see what all I am doing!

If you wish to read this whole info in a form of an easy to read book, do checkout the book “CSS Bullets, a comprehensive guide to all the CSS you need!“.

Thanks for sticking around!

Hope you like this series and stay tuned for more content on the learning.