Customizing Media Elements - HTML5 Media - page 46

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.