CSS transforms allow you to manipulate the position, size, and orientation of elements on a web page. They enable you to perform 2D and 3D transformations, such as rotating, scaling, skewing, and translating elements.

CSS transforms are applied using the transform property. Every aspect and type related to the CSS Transforms are discussed further.

2-D Transforms

All the key aspects related to the 2-D Transforms are mentioned below -

1. Translation - translate() moves an element along the X and Y axes.
2. Rotation - `rotate()` rotates an element clockwise around a fixed point.
3. Scaling - scale() changes the size of an element along the X and Y axes.
4. Skewing - skew() tilts an element along the X and Y axes.
5. Origin - transform-origin specifies the origin point for the transformation.

.element { transform: translate(100px, 50px) rotate(45deg) scale(1.2) skew(10deg, 5deg); transform-origin: top left; }

3-D Transforms

All the key aspects related to the 3-D Transforms are mentioned below -

1. Translation - translate3d() moves an element in 3D space.
2. Rotation - rotate3d() rotates an element around an arbitrary 3D vector.
3. Scaling - scale3d() changes the size of an element in 3D space.
4. Perspective - perspective sets the perspective view for 3D transforms.

.element { transform: translate3d(100px, 50px, 0) rotate3d(1, 1, 0, 45deg) scale3d(1.2, 1.2, 1) perspective(1000px); }

Transform Origin

The transform-origin property defines the origin point around which the transformation is performed.

It accepts values in pixels, percentages, or keywords like top, bottom, left, right, center, etc.

.element { transform-origin: 50% 50%; }

Transform Shorthand

The transform property can be specified as a shorthand to combine multiple transformations in a single declaration.

.element { transform: translate(100px, 50px) rotate(45deg) scale(1.2); }