CSS Introduction | CSS3 Transforms | 2D Transform

Transform

In CSS3, you can freely change the shape, size, position, and other aspects of an HTML element by using the transform property.

The transform property provides the following operations for HTML elements.

• Moves the element.
• Rotates the element.
• Changes the size of the element.
• Skews the element.
• Applies any desired combination of the four operations above to the element at once.

CSS3 provides both 2D transforms and 3D transforms through the transform property.

CSS Coordinate System

The x, y, and z coordinates used by the transform property follow a coordinate system like the one shown in the following figure. In the CSS coordinate system, the reference point is the upper-left corner of the browser. The z-axis is the coordinate axis that points in the direction of the viewer looking at the monitor in three-dimensional space. The arrow direction of each coordinate axis is the positive direction, and the opposite side is the negative direction.

CSS3 2D Transform Support Versions

The major web browser versions that support CSS3 2D transforms are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

2D Transform

The methods provided for 2D transforms are as follows.

1. translate()
2. rotate()
3. scale()
4. skew()
5. matrix()

translate() Method

The translate() method moves the element from its current position by the given x-axis and y-axis distances. If the given distance is positive, the element moves in the positive direction of that axis; if it is negative, the element moves in the negative direction.

<style>
    #trans {
        -webkit-transform: translate(100px, 50px);
        -ms-transform: translate(100px, 50px);
        transform: translate(100px, 50px);
    }
</style>

rotate() Method

The rotate() method rotates the element clockwise or counterclockwise by the given angle. If the given angle is positive, the element rotates clockwise; if it is negative, the element rotates counterclockwise.

<style>
    #rotate {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
</style>

scale() Method

The scale() method increases or decreases the size of the element by the given scale factor. If the given scale factor is greater than 1, the size increases; if it is greater than 0 and less than 1, the size decreases.

<style>
    #scale_inc {
        -webkit-transform: scale(1.5, 2);
        -ms-transform: scale(1.5, 2);
        transform: scale(1.5, 2);
    }
    #scale_dec {
        -webkit-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
    }
</style>

skewX() Method

The skewX() method skews the element in the x-axis direction by the given angle. If the given angle is positive, the element skews in the positive direction of the x-axis; if it is negative, it skews in the negative direction of the x-axis.

<style>
    #skew_x {
        -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
    }
</style>

skewY() Method

The skewY() method skews the element in the y-axis direction by the given angle. If the given angle is positive, the element skews in the positive direction of the y-axis; if it is negative, it skews in the negative direction of the y-axis.

<style>
    #skew_y {
        -webkit-transform: skewY(20deg);
        -ms-transform: skewY(20deg);
        transform: skewY(20deg);
    }
</style>

skew() Method

The skew() method skews the element by the given angles in the x-axis and y-axis directions, respectively.

<style>
    #skew {
        -webkit-transform: skew(20deg, 30deg);
        -ms-transform: skew(20deg, 30deg);
        transform: skew(20deg, 30deg);
    }
</style>

matrix() Method

The matrix() method lets you set all 2D transform methods in a single line.

This method has six parameters related to 2D transforms. The parameter order of the matrix() method is as follows.

Syntax

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

<style>
    #matrix {
        -webkit-transform: matrix(0.7, 0, 0, 0.7, 1, 0);
        -ms-transform: matrix(0.7, 0, 0, 0.7, 0, 0);
        transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
    }
</style>

CSS3 2D transform Properties