2D Transforms

Transforms define the state of an element and occur outside the document flow. There are a variety of transforms.

All examples in this document use the :hover property for simplicity. Since the transform property actually alters the appearance of an element onscreen, screen shots are inadequate to describe the impact.

Scale

The scale transform makes an element larger or smaller.

.scale:hover {
    transform: scale(1.4);
}

Translate

The translate transform moves an element on screen.

.translate:hover {
    transform: translate(20px, 20px);
}

Rotate

The rotate transform rotates or turns an element.

.rotate:hover {
    transform: rotate(45deg);
}

Skew

The skew transform bends or skews an element.

.skew:hover {
    transform: skew(-45deg, 10deg);
}

Matrix

The matrix transform changes an element in multiple ways.

.matrix:hover {
    transform: matrix(1.178, -0.256, 1.122, 1.333,          -41.533, -1.898);
}

Transform-Origin Property

Transforms normally begin in the middle of the element unless changed. The transform-origin uses two properties, horizontal offset and vertical offset, to change where the transform begins.

.rotate2:hover {
    transform: rotate(45deg);
    transform-origin: top left;
}