By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements.  These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space.

CSS transforms properties

Two major properties are used to define CSS transforms: transform and transform-origin

transform-origin
Specifies the position of the origin. By default it is at the center of the element and can be moved. It is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter.
transform
Specifies the transforms to apply to the element. It is a space separated list of transforms, which are applied one after the other, as requested by the composition operation. Composite transforms are effectively applied in order from right to left.

Examples

Here is an unaltered image of the MDN logo:

MDN Logo

Rotating

Here is the MDN logo in an iframe, rotated 90 degrees from its bottom-left corner.

<img style="transform: rotate(90deg);
            transform-origin: bottom left;" 
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

Skewing and translating

Here is the MDN logo, skewed by 10 degrees and translated by 150 pixels on the X axis.

<img style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;"
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

3D specific CSS properties

Performing CSS transformations in 3D space is a bit more complex. You have to start by configuring the 3D space by giving it a perspective, then you have to configure how your 2D elements will behave in that space.

Perspective

The first element to set is the perspective. The perspective is what gives us the 3D impression. The farther from the viewer the elements are, the smaller they are.

Setting perspective

This example shows a cube with the perspective set at different positions. How quick the cube shrinks is defined by the perspective property. The smaller its value is, the deeper the perspective is.

Result