HTML and CSS Reference
In-Depth Information
figure 8-13
css3 2D transformation functions
Transformation Function
Description
translate(offX, offY)
Moves the object offX pixels to the right and offY pixels down
translateX(offX)
Moves the object offX pixels to the right
translateY(offY)
Moves the object offY pixels down
scale(x, y)
Resizes the object by a factor of x horizontally and a factor of y vertically
scaleX(x)
Resizes the object by a factor of x horizontally
scaleY(y)
Resizes the object by a factor of y horizontally
skew(angleX, angleY)
Skews the object by the specified angle, angleX, horizontally and
angleY degrees vertically
skewX(angleX)
Skews the object by the specified angle, angleX, horizontally
skewY(angleY)
Skews the object by the specified angle, angleY, vertically
rotate(angle)
Rotates the object by the specified angle clockwise
matrix(n, n, n, n, n, n)
Applies a 2D transformation based on a matrix of six values
For example, to rotate an object 30° clockwise, you apply the following
rotate()
function:
transform: rotate(30deg);
To rotate an object counter-clockwise, you use a negative value for the angle of rota-
tion. Thus, the style
transform: rotate(-60deg);
rotates the object 60° counter-clockwise.
Figure 8-14 displays the effects of other transformation functions.
figure 8-14
examples of css3 transformation functions
transform: translate(10px, -15px);
transform: scale(0.8, 0.5);
transform: skew(25deg, -10deg);
transform: rotate(45deg);
