2D Transform

2D Transform with CSS3

With CSS3, we can apply effects such as rotate (rotate), scale (scaling), skew (tilt), translate (shift) to html elements .

For this, the transform property and the type of transformation to be applied are used.

Note: For older versions of browsers, the -webkit-, -moz-, -o- and -ms- prefixes must be used. This was written in the first examples on this page, while it was omitted in the others.

You can see and examine the working versions of the examples in the Subject Examples section.

Rotate - Rotate Objects

We can make it rotate clockwise by using a negative value.

Skew - Skew Objects

Using SkewX function skews in x axis, skewY skews in y-axis, skew in both x and y axis. 

The number of degrees of inclination to be applied is indicated in parentheses.

Scale - Scaling Objects

With the scale function, we can show objects larger or smaller than they are. The number of times the width and height of the function will be increased is written in the parentheses. Values ​​between 0 and 1 make the object appear smaller than it is.

When we apply this effect to objects, the elements within that object will also grow.

Translate - Changing Position of Objects

It was possible with the position and top-right-bottom-left properties to make the html elements appear in a different place than they should be. We can do this more easily with the translate function.

Write how much to shift in the x and y axis, respectively, in parentheses. Negative values ​​enable scrolling left or top.

Applying Multiple Transformations Using the Matrix Function

Transformation can be applied by specifying horizontal magnification, vertical skew (skewY), horizontal skew (skewX), vertical magnification, horizontal scrolling and vertical scrolling amounts in a single line, respectively .

Here's how we can show the usage:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

Sample:

EXERCISES