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