CSS: Transformations

#BuildTogether Day 34/100

Today was a lazy day as weekends are supposed to be :P It takes a hell long time to do a task on a weekend than it takes on a weekday… Do you feel the same or is it only me who is crazy ;)

Today I started with a new game on PS4- Horizon Zero Dawn and I loved the story track, although I suck at fighting (mostly controls) but I will pick up :D

I also have a talk to give tomorrow and I am struggling to finish my slides, so it's gonna be a little long Saturday…

Transformations

To create an impressive and dynamic user interface for websites, CSS transformations help with visual manipulations.

Every transformation should start with the transform property that allows making visual manipulations with elements. The objects can be changed and moved around using transform.

There are 4 basic CSS functions that can be used with the transform property:

• translate()
• rotate()
• skew()
• scale()

These functions are just property values used along with the transform property to indicate the transformation needed. Transform property allows for both 2D and 3D manipulations.

Coordinates of Transformation

All transformations are bound to a coordinate system whose origin (0, 0) is by default the center of the element that needs to be transformed i.e the transformations are done based on the center of the element.

The origin of the element is measured according to the position of the element.

Using Translate

This is used by indicating the exact place the element should be in. The first number is for location over the horizontal axis (“x”) and the second one is for location over the vertical axis (‘y”).

.water {
  transform: translate(10px, 20px);
}

With transform and translate() the element with the class water will be translated to the position (10, 20) measured in pixels. The starting point is the origin which by default is the center of the element.

Other units of measurement in CSS, like em, rem, pt, and % can also be used. The most common of them are pixels and percentages (%).

Using Transform

Using Rotate

This function used together with the CSS property transform can rotate things by stating the angle. An angle with a positive value will rotate the element clockwise, and, an angle with a negative value will rotate it counter-clockwise.

The angle is measured from the horizontal axis of the origin, which is by default the center of the element.

In transformation, different functions can be mixed and used at the same time.

Creating a CSS Television ;)

That is all for today.

If you fancy reading my 100 Days of journey, check our forums :D

The Journey of #100DaysOfCode (@henna_dev)