CSS3 2D transformation

CSS3 2D Transformation

CSS3 Transformation

With CSS3 Transformation, we can move, scale, reverse, rotate, and stretch elements.

How does it work?

The transformation effect allows an element to change its shape, size and position.

You can convert your elements using 2D or 3D.

2D Transformation

In this chapter you will learn about 2D transformation methods:

translate()

rotate()

scale()

skew()

matrix()

##translate() method

translate() method, moves from the current element position according to the parameters given by the left (X-axis) and top (Y-axis) positions.

transform: translate(50px,100px);

The translate value (50px, 100px) is moved 50 pixels from the left element and 100 pixels from the top.

rotate() method

rotate() method, rotates an element clockwise by a given degree. Negative values ​​are allowed, which rotates the element counterclockwise.

transform: rotate(30deg);

rotate value (30deg) The element is rotated 30 degrees clockwise.

scale() method

scale() method, the element increases or decreases in size, depending on the width (X-axis) and height (Y-axis) parameters:

transform: scale(2,4);

scale(2,4) changes the width to the original 2 times the size, and 4 times the height of its original size.

skew() method

skew() method, this element will be based on the horizontal (X-axis) and vertical (Y-axis) line parameters Given angle:

transform: skew(30deg,20deg);

skew(30deg,20deg) is the element that is 20 degrees and 30 degrees around the X-axis and Y-axis.

matrix() method

matrix() method and 2D transformation method are combined into one.

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

The matrix method has six parameters, including rotation, scaling, movement (translation) and tilt functions.