With the CSS3 2D transform feature, you can easily move, rotate, scale, and skew elements in a two-dimensional space.
A transformed element doesn't impact the elements around it but can overlap them, similar to absolutely positioned elements. However, the transformed element still occupies space in the layout at its original (untransformed) position.
The CSS3 transform property uses transform functions to change the coordinate system of an element to apply transformation effects.
The next section explains these transform functions:
translate() FunctionMoves the element from its current position to a new position along the X and Y axes. This is written as translate(tx, ty). If ty isn't provided, it defaults to zero.
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* Standard syntax */
}The function translate(200px, 50px) moves the image 200 pixels to the right along the x-axis and 50 pixels down along the y-axis.
rotate() FunctionThe rotate() function rotates the element around its origin (as set by the transform-origin property) by a specified angle. This is written as rotate(a).
img {
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE 9 */
transform: rotate(30deg); /* Standard syntax */
}The function rotate(30deg) rotates the image 30 degrees clockwise around its origin. You can use negative values to rotate the element counterclockwise.
scale() FunctionThe scale() function changes the size of the element. It is written as scale(sx, sy). If sy isn't provided, it defaults to the value of sx.
img {
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
transform: scale(1.5); /* Modern Browsers */
}The function scale(1.5) proportionally enlarges the width and height of the image by 1.5 times its original size. The scale(1) or scale(1, 1) function does not change the element.
skew() FunctionThe skew() function tilts the element along the X and Y axes by specified angles. It is written as skew(ax, ay). If ay isn't provided, it defaults to zero.
img {
-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
-moz-transform: skew(-40deg, 15deg); /* Firefox */
-ms-transform: skew(-40deg, 15deg); /* IE 9 */
transform: skew(-40deg, 15deg); /* Modern Browsers */
}The function skew(-40deg, 15deg) tilts the element -40 degrees horizontally along the x-axis and 15 degrees vertically along the y-axis.
matrix() FunctionThe matrix() function can execute all 2D transformations—like translate, rotate, scale, and skew—simultaneously. It takes six parameters in the form of a matrix which is written as matrix(a, b, c, d, e, f). The following section will show you how each of the 2D transformation functions can be represented using the matrix().
translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); — where tx and ty are the horizontal and vertical translation values.rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); — where a is the value in degrees. You can swap the sin(a) and -sin(a) values to reverse the rotation. The maximum rotation you can perform is 360 degrees.scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0); — where sx and sy are the horizontal and vertical scaling values.skew(ax, ay) = matrix(1, tan(ay), tan(ax), 1, 0, 0); — where ax and ay are the horizontal and vertical skew values in degrees.Here is an example of applying 2D transformations with the matrix() function.
img {
-webkit-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Firefox */
-ms-transform: matrix(0, -1, 1, 0, 200px, 50px); /* IE 9 */
transform: matrix(0, -1, 1, 0, 200px, 50px); /* Standard syntax */
}But, when you need to apply multiple transformations at the same time, it's easier to use the individual transformation functions and list them in sequence, like this:
img {
-webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Firefox */
-ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* IE 9 */
transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Standard syntax */
}The below table offers a quick summary of all the 2D transformation functions.
| Function | Description |
|---|---|
translate(tx,ty) |
Moves the element by the given amount along the X and Y-axis. |
translateX(tx) |
Moves the the element by the given amount along the X-axis. |
translateY(ty) |
Moves the the element by the given amount along the Y-axis. |
rotate(a) |
Rotates the element by the specified angle around the origin of the element, as defined by the transform-origin property. |
scale(sx,sy) |
Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect. |
scaleX(sx) |
Scale the width of the element up or down by the given amount. |
scaleY(sy) |
Scale the height of the element up or down by the given amount. |
skew(ax,ay) |
Skews the element by the given angle along the X and Y-axis. |
skewX(ax) |
Skews the element by the given angle along the X-axis. |
skewY(ay) |
Skews the element by the given angle along the Y-axis. |
matrix(n,n,n,n,n,n) |
Specifies a 2D transformation in the form of a transformation matrix comprised of the six values. |