Introduction
Hello all. Welcome to Part 6 of this series. Our previous article provides an introduction to CSS3 and describes the new features added to CSS3 and the uses of CSS3 over CSS 2.0. We've also seen various kinds of background properties and we created multiple columns using CSS3 and recently we've learned about Gradients.
I strongly recommend reading the following previous parts.
After learning all these things, we get to our most interesting topic of this series, Transformations in CSS3. If I describe that in my own words, from here we will see the actual uses of CSS3's new features. So, hold onto your seat, our journey is about to begin.
The following are the types of 2D transformations added to CSS3 that we will see in this article:
 Translate()
 Scale()
 Matrix()
 Rotate()
 Skew()
Before playing with these methods let's understand what and how many parameters they take. For that please find the following table.
In the preceding table, all the functions look simple and they take 1 or 2 parameters except for the Matrix() function that takes 6 parameters, "A, B, C, D, E, F". Multiple transformations can be applied to a single element at a time using the Matrix() function. Please find the following parameter details.
 A = ScaleX()
 B = SkewY()
 C = SkewX()
 D = ScaleY()
 E = TranslateX()
 F = TranslateY()
Now, let's look at the Syntax of transformations. The official syntax of a transformation is like:
transform: method(value);
But still some browsers need their prefix to run the transformation, so after this, the complete transformation syntax would be like:
Now we'll understand each of the preceding methods using an example, so first let's create a simple box of height 200px and width 400px and we'll create another box as the base for our first box.
Example
 .box
 {
 height:200px;
 width: 400px;
 backgroundcolor:#0094ff;
 fontsize:30px;
 border:3px solid #333;
 textalign:center;
 fontweight:bold;
 borderradius:10px;
 }

 .base
 {
 height: 250px;
 width: 450px;
 backgroundcolor:#ffd800;
 border:3px solid #333;
 padding:5px;
 }
So, we've created our base example as shown below and now we'll apply the preceding methods on the following shown output only.
First, we'll translate the preceding output from both of the axis, X and Y. Then we'll translate it to the X then the Yaxis.
If I say it in simple words, a translation is nothing but moving the element from its original position.
Translate(X,Y): In the following shown example, we'll translate 50px and 60px from the left and right respectively.
 #tranXY
 {
 moztransform: translate(50px,60px);
 }
Translating the preceding element from the X axis by 70px:
 #tranX
 {
 moztransform: translateX(70px);
 }
Translating the preceding element from the Y axis by 70px:
 #tranX
 {
 moztransform: translateY(70px);
 }
So, this was the translation part. Now let's move to our next function, Scale().
Scale(): Scaling is nothing but enlarging and reducing the element from its original position. We can also scale our elements in 3 ways, from the Xaxis, the Yaxis and for both sides. Let's see all these 3 methods onebyone.
Scaling an element from the Xaxis by 70px:
 #scaleX
 {
 moztransform: scaleX(1.3);
 }
As seen in the preceding output, the inner Blue element is enlarged by the Xaxis, in other words, its height remains the same, only the width changed.
Scaling element from Yaxis by 1.5:
 #scaleY
 {
 moztransform: scaleY(1.5);
 }
In this output, the inner Blue element was enlarged by the Yaxis, in other words, its width remains the same, only the height changed.
Scaling element from Xaxis by 1.5 and Yaxis by 0.7:
 #scaleXY
 {
 moztransform: scale(1.5,0.7);
 }
The preceding example showed how to enlarge or reduce the size of an element using the scale() method. If you want, you can also try by putting other values in the method parameters. But I recommend not to put large values, like more than 10 or 15 because that'll enlarge the element very high. You can test that with values between 1 and 3.
Now let's see another interesting method of 2D transformation, Rotate(). This method rotates an element by a specified number of degrees. The following is an example.
 #rotate
 {
 moztransform: rotate(15deg);
 }
If you see in the preceding output, our element is rotating clockwise. This is the default behavior, if you want to move your element counterclockwise then just use a negative value as the method parameter as shown in the following example.
 #rotateN
 {
 moztransform: rotate(15deg);
 }
Let's look at our second last method of the article, Skew().
If I say it in simple words, skewing is nothing but bending your element by a specified number of degrees. Let's look at an example, where we bend our element by 10 degrees from the Xaxis, 10 degrees from the Yaxis and 10 degrees from the X & 20 degrees from both axis as shown below.
Skewing element by Xaxis.
 #skewX
 {
 moztransform: skewX(10deg);
 }
Skewing element by Yaxis.
 #skewY
 {
 moztransform: skewY(10deg);
 }
Skewing element from both axes.
I hope you understand the skew function. Now, with this, we get to the last method of our article, Matrix().
We'll understand this function in an easy way with an example. This function might confuse you with its parameters because it takes only numbers, I mean it doesn't allow you to use "deg" or "angle" as we specify in a Skew or Rotate function. So, better use numbers less than 1, in other words in decimals or something, so that our output looks good.
As we know Matrix() takes 6 parameters, so we're using values for those parameters as follows:
 For ScaleX = 0.8
 For SkewY = 0.2
 For SkewX = 0.3
 For ScaleY = 1.5
 For TranslateX = 10
 For TranslateY = 20
When using this function, the position of the values matters a lot, if you change their positions you'll get a huge difference in your output.
Let's look at an example.
 #matrix
 {
 moztransform:matrix(0.8,0.2,0.3,1.5,10,20);
 }
If you want to see the fun, just change the values of the first four parameters to 1 or more than that and then see the result.
So with this, we're winding up our article on 2D transformation.
Conclusion
In this article, we've seen various types of transformation functions in 2D. We rotated our element, enlarged it and we also saw how to move an element using the transform function, we've also seen how to bend an element using the skew function, finally, we saw how to deal with the matrix function that is a combination of all other transformation functions.
I hope this article helps you to understand the concept of 2D transformations in CSS3.
In my next article, I'll be discussing how to work with 3D transformations that will be more interesting, so until then keep learning and keep sharing.
If you have any doubt then please feel free to ask using comments and I'll try my best to resolve those.
Please provide your valuable feedback and comments that enable me to provide a better article the next time.