Transform

Apply a 2D or 3D transformation to an element: rotate, scale, move, skew, etc.

Syntax
      transform: transform-functions | none ;

matrix(n,n,n,n,n,n) - Transformation, using a matrix of six values. matrix(2,1,1,7,350,50)
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - 3D transformation, using a 4x4 matrix of 16 values.
perspective(n) - Perspective view for a 3D transformed element.
rotate(angle) - 2D Rotation along the Z-axis, the angle is specified in the parameter. rotate(400deg)
 rotateX(angle) - 3D rotation along the X-axis. rotateX(180deg)
 rotateY(angle) - 3D rotation along the Y-axis. rotateY(180deg)
 rotateZ(angle) - 3D rotation along the Z-axis. rotateZ(60deg)
rotate3d(x,y,z,angle) - Rotate the element around an arbitrary vector in 3D space; x, y and z
scale(x,y) - Scale transformation. scale(0.85, 1.5)
 scaleX(x) - Scale transformation by giving a value for the X-axis. scalex(0.85)
 scaleY(y) - Scale transformation by giving a value for the Y-axis. scaley(1.15)
 scaleZ(z) - 3D scale transformation by giving a value for the Z-axis.
scale3d(x,y,z) - 3D scale transformation.
translate(x,y) - Translation, move across and down. translate(-10px, 25px)
 translateX(x) - Translation, move across (X-axis). translatex(-10px)
 translateY(y) - Translation, move down (Y-axis). translatey(25px)
 translateZ(z) - 3D translation, move towards the viewer (Z-axis). translatez(25px)
translate3d(x,y,z) - 3D translation, across, down and towards the viewer.
skew(x-angle,y-angle) - Skew transformation along the X- and the Y-axis. skew(20deg, -15deg)
 skewX(angle) - Skew transformation along the X-axis. skewx(20deg)
 skewY(angle) - Skew transformation along the Y-axis. skewy(20deg)
none - No transformation.

Negative values will move in the opposite direction.
Rotation values can be greater than 360 deg.

Multiple functions can be applied as part of the same CSS rule, separated with spaces: rotateX(25deg) rotateY(15deg);
If your code contains two transform rules for the same element, then standard CSS Specificity rules apply and the last rule will override the first.

Y
|
|
o – – –> X axis

To apply the transformation gradually, include a transition rule.
To apply the transformation immediately when the page loads, don't include any transition.

To flip text upside-down use transform: rotate(180deg); (an alternative is flipping text upside down using Unicode)

Examples

Slowly add a blue border and Rotate by 45 Degrees:

border: 2px solid blue;
-webkit-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
-webkit-transform: rotate(45deg) ;
        transform: rotate(45deg) ;

To remove the rotation use: rotate(0)

Slowly add a blue border and Rotate by 135 Degrees in the X-axis:

border: 2px solid blue;
-webkit-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
-webkit-transform: rotateX(135deg) ;
        transform: rotateX(135deg) ;

To remove the rotation use: rotateX(0)

Slowly add a blue border and Rotate by 135 Degrees in the Y-axis:

border: 2px solid blue;
-webkit-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
-webkit-transform: rotateY(135deg) ;
        transform: rotateY(135deg) ;

Scale to be narrow and tall:

border: 2px solid blue;
-webkit-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
-webkit-transform: scale(0.85,2.5);
        transform: scale(0.85,2.5);

To remove the scale use: scale(0)

Try it:

(CSS 3) Browser Support: IE 10, Firefox. Use the equivalent -webkit-transform for Safari and Chrome, -ms-transform for IE 9 and -moz-transform for old Firefox versions.

“Don't spend time beating on a wall, hoping to transform it into a door” ~ Coco Chanel

Related:

Easings.net - Objects in real life don’t just start and stop instantly, example easing functions.
Mozilla Transform reference page
transform-origin - Change the position of transformed elements.
transition - Shorthand to set transition- properties.
top, bottom, left, right - Set the initial position of an element.
CSS Transform examples - Rich Bradshaw.