CSS3 Series Part 6: 2D Transformation With CSS3

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: 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: 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: 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. 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. 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. Skewing element by Y-axis. 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. 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.