CSS3 2D Transformations Tutorial : Translate, Scale, Rotate And Skew

{tocify} $title={Table of Contents}

Now we will discuss the transformation properties with CSS3 2D. The goal is to be able to change both the position, shape, and properties of an element in a 2 dimensional plane. As we have discussed previously, the transformation is enabled by syntax transform followed by the function name and its value. As well as additional vendor prefix to tackle the problem of cross-browser, like this:

trasnform: function(values);

-webkit-transform: function(values);

Translate, TranslateX, TranslateY
Properties of this function to change the position of both elements in the horizontal direction (X axis), vertical (Y axis), or both. The value can be any with a variety of units (%, px, pc, em, vw, edll). Writing like this:

transform: translate( -350px, 100% );

This means that the element is shifted to the left by 350 px and 100% and above. Percent here is not referring to the viewport width, but refers to the breadth of our element. So the above elements by sliding up the right width. You can try translateX, and with separate translateY exactly as above only a single value is entered.

Maybe now you're thinking, 'What's the difference with the other properties, to simply shift the element I could use the margin'. Yes, it may be true you can do this with a margin, but transfrom to easily. Suppose you have the element horizontally centered with margin: 0 auto. Then the element you want to shift to the left by 70px. It will not matter if you know the exact width of the container element, so that the value of 70px is the right value. However, if on the contrary you do not know exactly how the width of the container (and indeed the majority of responsive design using wide like this), you can use these elements translate to shift, either with absolute units (px, pc, pt) and relative (em,%, vw).

Scale, ScaleX, ScaleY
Working to change the dimensions of an element and all elements in it (child elements). You can write briefly and separately with intermediaries commas, like this:

transform: scale(-1.5 , 3);

transfrom: scale(2);

In the first line, the element is reduced to 1.5x and 3x X direction toward Y. You can also write it separately, if just want to change the one-sided either ScaleX, and ScaleY. In the second row elements 2x either enlarged toward X and Y. In addition, negative values ​​are allowed and produce mirror elements, yap like a mirror effect on an object.

For those of you who love the fancy design of this effect may help, in my humble opinion, if you think the effect of applying the concept of mature first before installing all of our skill sets.

Rotate
Rotate function for rotating elements. Value that can be used in deg (degrees) and rad (radians), like this:

transform: rotate(45deg);

Above elements rotated by 45 degrees clockwise. Conversely, if the value is negative then anticlockwise. Element rotates on its axis which is in the middle of the element. You can change the position of its axis whenever the transform-origin property, with values​​: left, right, top, bottom, and joint-pojoknyo corner, like this:

transform-origin: right-top;

Element is converted into a pivot position in the upper right elements, until the rotation that occurs will refer to the point.

SkewX and skewY
Serves to tilt the elements. Symmetry elements on the X axis and Y axis is solved with these properties. Anyway, writing and skewY skewX briefly, it's been removed from the specification so that we no longer use. You can write like this:

transform: skewX(40deg);

transform: skewY(-1.5rad);

Combined transformation
We can combine all of the above transformation properties into a single short code (shorthand) with a comma separator. Like this:

transform: scale(2), rotate(45deg), skewX(40deg), skewY(-1.5rad);

If you are an engineer, scientist or mathematician, you'll like matrix. You can use your favorite matrix to transform the elements in CSS3. CSS3 gives 6 column matrix with the first column shows the transformation of 4 and 2 last column shows the dimensional magnification (scaling). Like this:

transform: matrix(-350, 200, 45, -1.5, -1.5, 3);

The value of this matrix are operated to all points on the elements to form new shapes and positions.

I want to cancel Transformation, how how? Easy, simply write the syntax like this:

transform: none;

The code you write on the element you want canceled transformation. This method is better done than you remove all the code that you created earlier. In addition to more easily write a bit of code you can also redo your work mengundo to get the effect you want.