transform 
transform: scale(1.2);

Lets you move, rotate, scale, and skew elements.

Transforms CSS
rotate() 
transform: rotate(20deg);

Let's you rotate an element.

Transforms CSS
skew() 
transform: skew(15deg, 15deg);

To skew an element. Slant an element to a certain angle.

Transforms CSS
rotate3d() 
transform: rotate3d(X, Y, Z, angle);

Rotates an element around a fixed axis in a 3d space.

Transforms CSS
matrix() 
transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Shorthand for all 2d transform properties.

Transforms CSS
transition 
transition: ;

Properties:
transition-property: ; // select which properties to add a transition on  
Values:
all          // select all effects 
css property // select a certain property (ex: width, color...)

transition-duration: 2s;          // set duration of transition
transition-timing-function: ease; // set a velocity for a transition
transition-delay: 2s;             // set a delay before a transition

Shorthand for transition properties. To set a duration to different effects.

Transitions CSS
rotateX() 
transform: rotateX(45deg);

3D, rotate around x-axis.

Transforms CSS
transform-style 
transform-style: preserve-3d;

Sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

Transforms CSS
matrix3d() 
transform: matrix3d(
1, 2, 3, 4,
5, 6, 7, 8,
9, 10, 11, 12,
13, 14, 15, 16);

Defines a 3D transformation as a 4x4 homogeneous matrix.

Transforms CSS
translate() 
transform: translate(x, y, z);

Let's you move elements in x-axis, y-axis, and z-axis.

Transforms CSS
scale() 
transform: scale(1.2);

Changes an element's size.

Transforms CSS
rotateY() 
transform: rotateY(45deg);

3D, rotate around y-axis.

Transforms CSS
perspective 
perspective: 30rem;

To give an element some perspective. Distance from the user and z=0 plane.

Transforms CSS
transform-origin 
transform-origin: x-offset y-offset;

Change position of transformed elements.

Transforms CSS