Transform
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling.
Transforming an element will change its position only visually, meaning its containing element will keep the original place and space of the transformed element.
# Scale
Scale defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales scale(x, y).
Hardware Acceleration: You can force the gpu to take control over the process, using the scale3d() function in order to achieve a smooth 60 frames per second animations without jittering or tearing. scale3d(x, y, z).
# Skew
The skew performs a shear transformation (also known as a shear mapping or a transvection), which displaces each point of an element by a given angle in each direction. Skewing an element is kind of like taking the points of an element, and pushing or pulling them in different directions, based on a given angle. skew(x, y).
# Translate
This is probably the most useful property for animating the movement of elements. translate(x, y).
Hardware Acceleration: You can force the gpu to take control over the process, using the translate3d() function in order to achieve a smooth 60 frames per second animations without jittering or tearing. translate3d(x, y, z).
# Rotate
This will allow rotating of an element by a specified number of degrees. rotate(deg).
Hardware Acceleration: You can force the gpu to take control over the process, using the rotate3d() function in order to achieve a smooth 60 frames per second animations without jittering or tearing. rotate3d(x, y, z, a => angle).
# Transform-Origin
This property is used in conjunction with CSS transforms and define the base point for the transformation.
By default the transform-origin is set to center.
The property takes up to two values: top | right | bottom | left | center.