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
 
Search WWH ::




Custom Search