CSS 2D Transformations

Hello! Today, from here we begin our journey into some advanced CSS topics like CSS transformations, which was included in the CSS3 specification.

We will start with 2D transformations that allows you to translate, scale and skew elements. We have explained what these terms mean in details below.

A transformation is an effect that lets an element change shape, size or its position. CSS3 supports both 2D and 3D transformations.

Let's start by listing down the browser which supports 2D transformations.

• IE 10+
• Google Chrome 36+
• Mozilla Firefox 16+
• Safari 9+
• Opera 23+

Note: Some older versions of these browsers also support 2D transformations but to make your CSS work, you need to attach a prefix to the transform property (such as -ms- or –webkit-).

Instead of properties, you will learn the following transformation functions in this tutorial.

• translate()
• rotate()
• scale()
• skewX()
• skewY()

translate()

This function moves an element from its normal position to a different position using the values provided as parameters to the function.

The following example will move the <h1> element 50 pixels to the right, and 100 pixels down from its original position. Notice the prefixes attached to support older versions.

h1{
    -ms-transform: translate(50px,100px);   /* IE 9 */
    -webkit-transform: translate(50px,100px);   /* Safari */
    transform: translate(50px,100px);
}

Live Example →

rotate()

You can rotate a particular element clockwise or anti-clockwise by providing a degree value to this function.

h1{ 
    transform: rotate(20deg);
}

Live Example →

scale()

Scaling increases or decreases the size of an element.

div{ 
    transform: scale(2, 3);
}

The above example will increase size of the <div> element to two times of its original width, and three times of its original height.

Live Example →

Try using negative values in the scale() method and see how the mirror image of the text inside the element is displayed.

skew()

You can also skew an element along the X-axis or Y-axis by any given angle by using the skewX() or skewY() functions respectively.

div{ 
    transform: skewX(20deg); 
}

div{ 
    transform: skewY(30deg); 
}

Or, you can provide two parameters to the skew() method as follows:

div{ 
    transform: skew(20deg, 30deg);
}

The first parameter corresponds to the X-axis and the second to Y-axis. If the second parameter is not specified, it will take zero value by default.

Live Example →

The Transform-Origin Property

The transform-origin property allows you to change the position of already transformed elements. The x-axis and y-axis of an element can be altered in a 2D transformation whereas the z-axis of an element can also change along with x-axis and y-axis in 3D transformations.

Note: This property must be used together with the transform property.

Syntax:

transform-origin: x-axis y-axis[z-axis] | initial | inherit;

• The possible values for the x-axis parameter are right, left, center, length or percentage.
• The possible values for the y-axis parameter are top, bottom, center, length or percentage.
• The possible value for z-axis is length.

Alright, so that was all about 2D transformations in CSS3.