CSS3 (b)

Translate () method

With the translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters:

Example:

Div{Transform:Translate (50px,100px);-ms-transform:Translate (50px,100px);/*IE 9*/-webkit-transform:Translate (50px,100px);/*Safari and Chrome*/-o-transform:Translate (50px,100px);/*Opera*/-moz-transform:Translate (50px,100px);/*Firefox*/}

The value translate (50px,100px) moves the element from the left to 50 pixels, moving 100 pixels from the top.

Rotate () method

The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.

Instance

Div{Transform:Rotate (30deg);-ms-transform:Rotate (30deg);/*IE 9*/-webkit-transform:Rotate (30deg);/*Safari and Chrome*/-o-transform:Rotate (30deg);/*Opera*/-moz-transform:Rotate (30deg);/*Firefox*/}

The value rotate (30deg) Rotates the element clockwise by 30 degrees.

Scale () method

With the scale () method, the dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) Parameters:

Example code:

Div{Transform:Scale (2,4);-ms-transform:Scale (2,4);/*IE 9*/-webkit-transform:Scale (2,4);/*Safari and Chrome*/-o-transform:Scale (2,4);/*Opera*/-moz-transform:Scale (2,4);/*Firefox*/}

The value scale (2,4) converts the width to twice times the original size and converts the height to 4 times times the original height.

Skew () method

By the skew () method, the element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) Parameters:

Sample code

Div{Transform:skew (30deg,20deg);-ms-transform:skew (30deg,20deg);/*IE 9*/-webkit-transform:skew (30deg,20deg);/*Safari and Chrome*/-o-transform:skew (30deg,20deg);/*Opera*/-moz-transform:skew (30deg,20deg);/*Firefox*/}

The value skew (30deg,20deg) flips the element around the X-axis by 30 degrees and flips 20 degrees around the Y-axis.

Transform: Applies a 2D or 3D conversion to an element.

CSS3 (b)