CSS tutorial series: CSS functions part-2

After going through the first part of the CSS functions tutorial CSS tutorial series: CSS functions part-1, we can proceed to talk about a couple of more functions.

transform property

This property allows you to modify an element by rotating or moving it and even applying some 2D or 3D transformation.

rotate()

This function rotates an element without distorting it as it rotates on its center axis. You can rotate an element on a specific axis by using rotateX() to rotate on the x-axis, rotateY() for the y-axis and rotateZ() for the z-axis and each of these functions takes an argument that is degrees.

div1 {
  transform: rotateX(60deg);
}

div2 {
  transform: rotateY(45deg);
}

div3 {
  transform: rotateZ(90deg);
}

Additional info
research rotation3d()

scale()

This function resizes an element width and height proportionally. The scale() functions takes two arguments representing the width and height respectively. For example, say we have a <div> of height 200px and width 200px and we want this <div>'s width to be 2 times its original width and 4 times its original height.

 div {
  transform: scale(2,4);
}

scale() is a shorthand for scaleX() and scaleY(). To Scale an element on a specific axis scaleX, scaleY() and scaleZ() can be used.

Additional info
research scale3d()

skew()

The skew() takes angles as arguments. This function drags your element along the X or Y axis if one argument was passed. If both arguments were passed both axes will be affect. skew() is a shorthand for skewX() and skewY() which affect x-axis and y-axis independently.

div {
  transform: skew(30deg, 10deg);
}

translate()

When using the translate() functions, an element is moved while keeping its place in the document flow. Both length and percentage values are accepted as arguments. Much like the skew() function if one of the arguments to the translate() function is defined an element is translated along the X axis. If both arguments are defined, an element is translated along the X and Y axes.