Post
Ask Question

CSS3 Series Part 6: 2D Transformation With CSS3

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
  1. .box  
  2. {  
  3.     height:200px;  
  4.     width: 400px;  
  5.     background-color:#0094ff;  
  6.     font-size:30px;  
  7.     border:3px solid #333;  
  8.     text-align:center;  
  9.     font-weight:bold;  
  10.     border-radius:10px;  
  11. }  
  12.   
  13. .base  
  14. {  
  15.     height: 250px;  
  16.     width: 450px;  
  17.     background-color:#ffd800;  
  18.     border:3px solid #333;  
  19.     padding:5px;  
  20. }  
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 Y-axis.
 
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.
  1. #tranXY  
  2. {  
  3.     -moz-transform: translate(50px,60px);  
  4. }  
 
Translating the preceding element from the X axis by 70px:
  1. #tranX  
  2. {  
  3.     -moz-transform: translateX(70px);  
  4. }  
 
Translating the preceding element from the Y axis by 70px:
  1. #tranX  
  2. {  
  3.     -moz-transform: translateY(70px);  
  4. }  
 
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 X-axis, the Y-axis and for both sides. Let's see all these 3 methods one-by-one.
 
Scaling an element from the X-axis by 70px:
  1. #scaleX  
  2. {  
  3.     -moz-transform: scaleX(1.3);  
  4. }  
 
As seen in the preceding output, the inner Blue element is enlarged by the X-axis, in other words, its height remains the same, only the width changed.
 
Scaling element from Y-axis by 1.5:
  1. #scaleY  
  2. {  
  3.     -moz-transform: scaleY(1.5);  
  4. }  
 
In this output, the inner Blue element was enlarged by the Y-axis, in other words, its width remains the same, only the height changed.
 
Scaling element from X-axis by 1.5 and Y-axis by 0.7:
  1. #scaleXY  
  2. {  
  3.     -moz-transform: scale(1.5,0.7);  
  4. }  
 
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.
  1. #rotate  
  2. {  
  3.     -moz-transform: rotate(15deg);  
  4. }  
 
If you see in the preceding output, our element is rotating clockwise. This is the default behavior, if you want to move your element counter-clockwise then just use a negative value as the method parameter as shown in the following example.
  1. #rotateN  
  2. {  
  3.     -moz-transform: rotate(-15deg);  
  4. }  
 
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 X-axis, 10 degrees from the Y-axis and 10 degrees from the X & 20 degrees from both axis as shown below.
 
Skewing element by X-axis.
  1. #skewX  
  2. {  
  3.     -moz-transform: skewX(10deg);  
  4. }  
 
Skewing element by Y-axis.
  1. #skewY  
  2. {  
  3.     -moz-transform: skewY(10deg);  
  4. }  
 
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.
  1. #matrix  
  2. {  
  3.     -moz-transform:matrix(0.8,0.2,0.3,1.5,10,20);  
  4. }  
 
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.


Similar Articles