CSS 2D Transformations
Jakob Jenkov |
In CSS 3.0 it is possible to perform 2D transformations on HTML elements via the transform
CSS property. At the time of writing Safari for Windows needed the -webkit-transform CSS property
to perform the CSS transforms. The transformations you can perform are:
- Rotate
- Translate
- Scale
- Skew
- Matrix
Each of these transformations are covered throughout the rest of this text. Actually, these transformations are very similar to the SVG transformations which you can perform on SVG elements. It is good to be aware that both options exist.
Rotate
The rotate transformation makes it possible to rotate an HTML element around a certain point. Here is an example
that rotates a div element 45 degrees around its own center:
<style>
#div1 {
width : 200px;
height: 200px;
background-color: #ff0000;
-webkit-transform : rotate(45deg);
transform : rotate(45deg);
}
</style>
<div id="div1"></div>
Here is how that div element looks with these styles applied:
The rotate transformation takes a single parameter which is the number of degrees to rotate the HTML element.
You can use both positive and negative numbers.
You can change the point around which the HTML element is rotated using the transform-origin
CSS property.
Translate
The CSS transformation translate moves the given HTML element in the X and Y direction.
Here is a CSS translate example:
<style>
#div2 {
width: 100px;
height: 100px;
background-color: #ff0000;
-webkit-transform : translate(25px, 25px);
transform : translate(25px, 25px);
}
</style>
<div id="div2"></div>
This example translates the div element 25 pixels along the X and Y axis. Here are two div
elements with the same width and height, where the second element has the above translation applied to it:
As you can see, the second HTML element is moved compared to where it would have been located without the translation.
Scale
The scale transform function can scale an HTML element up and down in size. The
scale CSS property takes two parameters: A ratio to scale in the X and Y direction. Here is a CSS
scale example:
<style>
#div4 {
width: 100px;
height: 100px;
background-color: #00ff00;
}
#div5 {
width: 100px;
height: 100px;
background-color: #ff0000;
-webkit-transform : scale(2.0, 2.0);
transform : scale(2.0, 2.0);
}
</style>
<div id="div4">Div 1</div>
<div id="div5">Div 2</div>
This example scales the second div element by 2 along the X and Y axis. Here are two HTML
elements with the above styles applied:
As you can see the scaling applies to the text inside the div element too. It is not just the
dimensions of the HTML element that are scaled. As you have also have noticed the scaling is performed using
the center of the HTML element as transformation origin (explained later). That makes the scaled HTML element
extend both to the left and right of it's original position.
Skew
The skew transformation skews the X and Y axis with a given number of degrees. The skew
transformation takes two parameter: An X and Y degree. Here is a skew transformation example:
<style>
#div7 {
width: 100px;
height: 100px;
background-color: #ff0000;
-webkit-transform : skew(25deg, 0deg);
transform : skew(25deg, 0deg);
}
</style>
<div id="div7">Div 2</div>
Here is how a div element looks with these styles applied:
This example skews the X axis by 25 degrees and the Y axis by 0 degrees.
Matrix
The matrix transformation can transform an HTML element according to a matrix.
The matrix looks like this:
a c e b d f 0 0 1
The matrix transformation takes 6 parameters in total. These parameters are the a, b, c, d, e and f
values from the matrix above. Here is an example:
#div8{
-webkit-transform: matrix(a,b,c,d,e,f);
transform : matrix(a,b,c,d,e,f);
}
The other CSS transformation functions can all be expressed as matrices. Here are some examples:
Translate 1 0 tx 0 1 ty 0 0 1 matrix(1,0,0,1,tx,ty);
Rotate
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
matrix( cos(a), sin(a),-sin(a),cos(a),0,0 );
Note: the values for cos(a) and sin(a) have to be precomputed before being inserted into the matrix. The resulting parameter a is the angle to rotate.
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0);
A skew transformation along the x-axis can be written as:
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0);
The tan(a) value has to be precomputed before being inserted into the matrix() function.
A skew transformation along the y-axis can be written as:
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
The transform-origin CSS Property
The transform-origin CSS property specifies around what point the transformations take place.
The transform-origin CSS property takes two values: A length and a height
CSS property. Here is a CSS transform-origin example:
<style>
#div1 {
transform-origin: 0 0;
}
</style>
<div id="div1"></div>
This example sets the transformation origin to 0,0, which means the upper left corner of the HTML
element. You can also specify percentages. Here is a transform-origin example using percentages:
<style>
#div1 {
transform-origin: 25% 25%;
}
</style>
<div id="div1"></div>
This example sets the transformation origin to the point which is located 25% from the left edge and 25% from the top edge of the HTML element.
You can also use a set of keywords as length and height values. These are:
- top
- bottom
- left
- right
- center
These keywords refer to the top, bottom, left or right edge of the HTML element, or the center of the HTML element.
The transform-origin CSS property is commonly combined with the rotate transformation
to set the point around which to rotate the given HTML element.
Combining Transformations
You can combine CSS transformations by specifiying more than one transformation to be perfomed. You do so by
separating the functions by space in the transform CSS property value. Here is an example:
#div1 {
transform: rotate(25deg) translate(100px, 25px);
}
This example first rotates the given HTML element by 25 degrees and then translates (moves) it 100 pixels along the X-axis and 25 pixels along the Y-axis.
| Tweet | |
Jakob Jenkov | |
