Transform is a CSS, HTML, and WikiText attribute that allows you to rotate elements. With this attribute, you can skew/rotate things on the X and Y axis and enlarge your element.

Types of Transforms

Matrix

The matrix transform means tilting the element on an X and Y axis.

Code:

<div style="height:_px;width:_0px;transform:matrix(0.70,0.5,-0.5,0.866,0,0);overflow:hidden">text</div>

Which results in:

Scale

The scale transform scales (enlarges and reduces) the size of the element. You can also add x and y transforms by replacing 'scale' in the below code with 'scaleX' or 'scaleY'.

Code:

<div style="height:_px;width:_0px;transform:scaleY(2);overflow:hidden">text</div>

Result:

See how that text is taller, making the letters appear thinner? This is because we modified the Y-scale of it, by making it taller.

Rotate

The rotate transformation m rotates the element by a set amount of degrees.

Code:

<div style="height:_px;width:_0px;transform:rotate(90deg);overflow:hidden">text</div>

Result:

Another example in smaller degrees:

The code for this:

<div style="transform:rotate(5deg)">Text here</div>

Skew

The skew transform squishes the element, making it look like you're looking at the element from a different perspective.

Code:

<div style="height:_px;width:_0px;transform:skew(10deg,10deg);overflow:hidden">text</div>

Result: