CSS3 transforms allow web developers to take just about any element in an HTML document, and rotate, translate, skew, and scale it, all while not changing its effect on the page layout. CSS3 provides both 2D and 3D transforms.
However, while 2D transforms are supported in all modern browsers, 3D transforms are currently only supported in Safari, Chrome, and Internet Explorer version 10. In this article, we will take a closer look at how to use 2D transforms.
How do Transforms Work?
At a high level, a transform is an effect that lets an element change its shape, size, and position. We will take a look at some examples to get a better idea of how these transforms work.
Transform Property
The transform property accepts for its value, one or more transform functions. These transform functions specify a transformation. Functions take the form of a function name, with a value inside of a set of parenthesis.
Browser Support
At the time of this writing, the transform property is not supported by any browser. However, vendor prefixes are currently supported.
| Browser | Vendor Prefix |
|---|---|
| Internet Explorer 9+ | -ms-transform |
| Firefox | -moz-transform |
| Opera | -o-transform |
| Safari | -webkit-transform |
| Chrome | -webkit-transform |
Syntax
The transform property takes transform functions as its value. The default value is none.
transform: none|transform-functions| Transform Function | Description |
|---|---|
matrix(n,n,n,n,n,n) | 2D transformation, using a matrix of six values. |
rotate(angle) | 2D rotation, the angle is specified in the parameter. |
scale(x,y) | 2D scale transformation, changing the width and height of the element. |
scaleX(n) | 2D scale transformation, changing the element’s width. |
scaleY(n) | 2D scale transformation, changing the element’s height. |
skew(x-angle,y-angle) | 2D skew transformation along the X- and the Y-axis. |
skewX(angle) | 2D skew transformation along the X-axis. |
skewY(angle) | 2D skew transformation along the Y-axis. |
translate(x,y) | 2D translation, moving the element along the X- and the Y-axis. |
translateX(n) | 2D translation, moving the element along the X-axis. |
translateY(n) | 2D translation, moving the element along the Y-axis. |
translate() function
With the translate() function, the element moves from its current position to a new position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position.
If you only want to translate along the X-axis, you can use the translateX() function. If you only want to translate along the Y-axis, use the translateY() function.
<!DOCTYPE html>
<html>
<head>
<style>
.group {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
padding:10px;
}
.original {
background-color:#EFEFEF;
}
#target {
background-color:#FFAA00;
-ms-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
}
</style>
</head>
<body>
<div class="original group" id="original">Original</div>
<div class="group" id="target">Transform</div>
</body>
</html>rotate() function
With the rotate() function, we can rotate an element clockwise or counter-clockwise at a given degree. A positive value rotates the element clockwise. A negative value rotates the element counter-clockwise.
#target {
background-color:#FFAA00;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}scale() function
The scale() function increases or decreases the size of the target element depending on the parameters given for the width (X-axis) and the height (Y-axis).
If you only want to scale on the X-axis, use the scaleX() function. If you only want to scale the on Y-axis, use the scaleY() function. The numeric value provided will scale it that number of times.
#target {
background-color:#FFAA00;
-ms-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);
}skew() function
The skew() function turns an element in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines.
If you only want to skew on the X-axis, use the skewX() function. If you only want to skew on the Y-axis, use the skewY() function.
#target {
background-color:#FFAA00;
-ms-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}matrix() function
While it is unlikely that you will ever need to use the matrix function, underneath all these functions is the core of CSS transformations, which is based on the mathematical concept of a transformation matrix.
Each of the functions we have covered so far can be represented by a matrix value.
You can visit the W3C site for detailed information about the transformation matrix. In the following example, we will rotate a div element 30 degrees, using the matrix function.
#target {
background-color:#FFAA00;
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}transform-origin Property
The transform-origin property allows you to change the position on the transformed element. An element with a 2D transformed property can change the X-axis and Y-axis of the element.
In other words, the transform-origin property sets an element’s base placement. For 3D transforms, it can change the Z-axis as well.
transform-origin: x-axis y-axis z-axis;The X-axis and Y-axis values can be supplied as left, center, right, [length], or [percentage]. Here is an example.
#target {
background-color:#FFAA00;
-ms-transform: rotate(45deg);
-ms-transform-origin:25px 30px;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:25px 30px;
-moz-transform: rotate(45deg);
-moz-transform-origin:25px 30px;
-o-transform: rotate(45deg);
-o-transform-origin:25px 30px;
transform: rotate(45deg);
transform-origin:25px 30px;
}In this previous example, you can compare the element that has only been rotated, vs an element that has been rotated and has had the transform-origin property applied.
As you can see, the transform-origin has changed the position of the element on its X-axis as well as its Y-axis.
