CSS Transformations

CSS Transformations

CSS transformations can be split into two categories, two-dimensional and three-dimensional. Well look at two-dimensional transformations first. Two-dimensional CSS transformations operate on the X (horizontal) and Y (vertical) axes.

CSS Transform: Translate
The translate() method translates, or moves, a page element up, down, left, and/or right on the page by a specified amount. In the parenthesis, the first number specifies the horizontal distance, and the second number specifies the vertical distance.
For example, we can translate our div by a number of pixels:

transform: translate(100px, 75px);

TranslateX():
In addition to translate(), we also have the translateX() and translateY() methods. translateX() moves an element only horizontally, and takes one argument:

transform: translateX(100px);

TranslateY():
Similarly, the translateY() method moves an element vertically. It also takes just one argument:transform: translateY(100px);

CSS Transform: Scale
The scale() method changes the size of the target element. If we provide one argument, this increases or decreases the size of our div by a multiple of its original size:

transform: scale(2);

CSS Transform: Rotate
The rotate() function, as you might guess, rotates an element. By default, the element will rotate around its center. We can specify the rotation in terms of degrees, radians, or turns (from 0turn to 1turn):

transform: rotate(45deg);

CSS Transform: Skew
The skew() method skews, or slants, an element along its X and/or Y axes. Its arguments specify the horizontal and vertical angle of the skew, respectively.

transform: skew(50deg, -15deg);

The CSS transform-origin Property
transform-origin is another CSS property that can be used with transform. The transform-origin property changes the position of the origin, the point where the transformation starts or is based around.
This is most clearly demonstrated with the rotate() method: We can use transform-origin to move the center point of rotation:

transform: rotate(45deg);  transform-origin: top left;

CSS Transform: Perspective
The perspective() value sets the depth of the element on the Z-axis. It toggles how close or far away the element appears. perspective() is used in conjunction with other 3D transformation methods, as well see next.
CSS Transform: rotateX() and rotateY()
Like rotate(), the rotateX() and rotateY() values rotate our div, but around the X and Y-axes:

transform: perspective(500px) rotateY(40deg);transform: perspective(500px) rotateY(60deg); transform: perspective(500px) rotateY(80deg);

Don't forget to share this post!