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.
