HTML and CSS Reference

In-Depth Information

scale(number [, number])

scale(number [, number])

Scale the element, either by providing one value for both X and Y values, or two values

(one for the X and one for the Y value).

scaleX(number), scaleY(number)

scaleX(number), scaleY(number)

Scale the element by the given number, either along the X value (scaleX), or the Y value

(scaleY).

rotate(angle)

Rotate the element by the angle about the origin.

skew(angle[,angle])

skew(angle[,angle])

Skew the element along both axes. If the second angle is not provided, the skew angle is

the same for both the X and Y axis.

skewX(angle), skewY(angle)

Skew the element along the respective axis.

translate(value[,value])

translate(value[,value])

Applying the translate transform effectively repositions the element, either by whole val-

ues or percentages, positive or negative values. If the second value is omitted, it's assumed

to be zero.

translateX(value), translateY(value)

translateX(value), translateY(value)

Apply the translate transform, either in the X direction, or Y direction, accordingly.

matrix(val1, val2, val3, val4, val5, val6)

matrix(val1, val2, val3, val4, val5, val6)

The matrix transform is a way of combining all of the other transform effects into one

transform function call.

The only other transformation is the
transform-origin
property, which modifies the origin

for transformations for the element. For instance, when you rotate an element, the center of

the transform is the center of the rotation. If you want to center the rotation at the element's

left-top corner, you would use the following:

transform: rotate(30deg);

transform-origin: 0 0;

If you don't provide the
transform-origin
, the element shifts out of place during the rota-

tion.