Tech and Media Labs
This site uses cookies to improve the user experience.




CSS 2D Transformations

Jakob Jenkov
Last update: 2014-10-10

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:

Div 1
Div 2


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.

lt;

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.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC