HTML and CSS Reference

In-Depth Information

Transformation Function

Description

Applies a two-dimensional transformation on the object.

matrix(
n1
,
n2
,
n3
,
n4
,
n5
,
n6
)

matrix3d(…)

In the 3-D realm. Applies a three-dimensional transformation

on the object. The parameters are the 16 values of a 4×4

matrix.

none

Function that does nothing.

perspective(
p
)

In the 3-D realm. Used to give a 3-D sense of depth to an

element. Can also be set through the
perspective
attribute.

rotate(
angle
)

Rotates the object.

rotate3d(
x
,
y
,
z
,
angle
)

In the 3-D realm. Rotates the object around the unit vector

specified by x, y, and z.

In the 3-D realm. Rotates the object around the X axis.

rotateX(
angle
)

rotateY(
angle
)

In the 3-D realm. Rotates the object around the Y axis.

rotateZ(
angle
)

In the 3-D realm. Rotates the object around the Z axis.

scale(
number
,
number
)

Scales the object by the scale values specified. Where 1 is

the same scale of the object and numbers less than one

scale the objects smaller and greater than one larger. If the

second value for Y scale is omitted, it is assumed to be the

same as the first.

scale3d(
number
,

number,number
)

In the 3-D realm. Same as the previous function, but adds a

parameter for the Z scale.

scaleX(
number
)

Scales the object only on the X axis, keeping Y the same.

Same as
scale(X,1)
.

scaleY(
number
)

Scales the object only on the Y axis, keeping X the same.

Same as
scale(1,Y)
.

scaleZ(
number
)

In the 3-D realm. Scales the object only on the Z axis. Same

as
scale3d(1,1,Z)
.

skew(
angle
,
angle
)

Skews the element along the X and Y axes by the specified

angle values. The second value may be missing and

assumed to be 0.

skewX(
angle
)

Skews the element along the X axis by the specified angle.

skewY(
angle
)

Skews the element along the Y axis by the specified angle.

Specifies a translation by the vector translation-value-x,

translation-value-y. The translation-value-y is optional and will

be 0 if not specified.

translate(
translation-value-

x
,
translation-value-y
)

translate3d(
translation-

value-
x,
translation-value-x

y,
translation-value-
z)

In the 3-D realm. Same as the previous entry except it includes

the Z axis. The translation-value-z cannot be a percentage.

translateX(
translation-value
)
Specifies a translation by translation-value in the X direction.

translateY(
translation-value
)
Specifies a translation by translation-value in the Y direction.

translateZ(
translation-value
)
In the 3-D realm. Specifies a translation by translation-value

in the Z direction. Cannot be a percentage.

T
ABLE
6-11
Transform Functions