2D Transforms

Syntax#

• Rotate Transform
• transform: rotate(<angle>)
• Translate Transform
• transform: translate(<length-or-percentage> [, <length-or-percentage>]?)
• transform: translateX(<length-or-percentage>)
• transform: translateY(<length-or-percentage>)
• Skew Transform
• transform: skew(<angle> [, <angle>]?)
• transform: skewX(<angle>)
• transform: skewY(<angle>)
• Scale Transform
• transform: scale(<scale-factor> [, <scale-factor>]?)
• transform: scaleX(<scale-factor>)
• transform: scaleY(<scale-factor>)
• Matrix Transform
• transform: matrix(<number> [, <number> ]{5,5})

Parameters#

Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left and the Y axis goes downwards as shown in the following image:

So a positive translateY() goes downwards and a positive translateX() goes right.

Browser support and prefixes

• IE supports this property since IE9 with the -ms- prefix. Older versions and Edge don’t need the prefix
• Firefox supports it since version 3.5 and needs the -moz- prefix until version 15
• Chrome since version 4 and until version 34 needs the -webkit- prefix
• Safari needs the -webkit- prefix until version 8
• Opera needs the -o- prefix for version 11.5 and the -webkit- prefix from version 15 to 22
• Android needs the -webkit- prefix from version 2.1 to 4.4.4

Example of prefixed transform:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Rotate

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end.

Scale

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis.

The center of the transform is in the center of the div, 50% from left and 50% from top.

Translate

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.

You can also specify translations on a single axis.

On the X axis:

.translate {
    transform: translateX(200px);
}

On the Y axis:

.translate {
    transform: translateY(50%);
}

Skew

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis.
The center of the transform is in the center of the div, 50% from left and 50% from top.

See the result here.

Multiple transforms

Multiple transforms can be applied to an element in one property like this:

transform: rotate(15deg) translateX(200px);

This will rotate the element 15 degrees clockwise and then translate it 200px to the right.

In chained transforms, the coordinate system moves with the element. This means that the translation won’t be horizontal but on an axis rotate 15 degrees clockwise as shown in the following image:

Changing the order of the transforms will change the output. The first example will be different to

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

As shown in this image:

Transform Origin

Transformations are done with respect to a point which is defined by the transform-origin property.

The property takes 2 values : transform-origin: X Y;

In the following example the first div (.tl) is rotate around the top left corner with transform-origin: 0 0; and the second (.tr)is transformed around it’s top right corner with transform-origin: 100% 0. The rotation is applied on hover :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

The default value for the transform-origin property is 50% 50% which is the center of the element.