Transform

Basic Usage

The transform property accepts a transform function as an indicator of the desired behavior, and the transform function then accepts its own value in parentheses. An example will make this more clear. Here the rotate() transform function is applied:

Different transform functions may accept different units for their values. So while the rotate() function accepts deg units (degrees), the scale() function accepts a unitless number, where 1 is equal to 100% of the original scale:

Common Transform Functions

Some of the most common transform fuctions include:

translateX():

Moves the element horizontally. Accepts any size unit (px, rem, em, etcetera).

translateY():

Moves the element vertically. Accepts any size unit (px, rem, em, etcetera).

translate():

Shorthand for translateX and translateY. Requires two comma-separated values: X value, then Y value. Accepts any size unit (px, rem, em, etcetera).

scale():

Makes the element larger or smaller. Accepts a unitless number, where 1 is equal to 100% of the original size.

rotate():

Rotates (turns) the element. Accepts deg units, which represent degrees of angle.

skewX():

Distorts the element on the horizontal plane. Accepts deg units, which represent degrees of angle.

skewY():

Distorts the element on the vertical plane. Accepts deg units, which represent degrees of angle.

skew():

Shorthand for skewX and skewY. Requires two comma-separated values: X value, then Y value. Accepts deg units, which represent degrees of angle.

Example Usage

In the demo above, can you make the translateX() example move left instead of right? Can you turn the text of the rotate() example upside down?