The CSS3 2D transform property you can
It is an effect that changes the
position of an element. Transforms are triggered on
events like mouse-hover or mouse-click.
The transformed element doesn't disturbs the elements surrounding it, it can overlap them. The element just take its own space specified to it before the transformation.
There are many functions defined in CSS3 which are used to apply different kinds of transformation. Look at the functions below to understand how each of it works with elments.
Thus function can transform the element from its current position to a new position along the X and Y axis. This can be written as
translate(x-axis px, y-axis px). The example will help you to understand the working of this property.
scale() function increases or decreases the size of the element according to the values given for the width and height
parameters in the function. This can be written as
scale(2,0.5). The value 2 would transform the horizontal length to be 2
times its original size. The value 0.5 would transform the vertical length to be half its original size.
rotate() function rotates an element clockwise or anti-clockwise according to a given degree. It is written as
A positive value, such as 60deg, will rotate the element 60deg clockwise, while a negative value, such as -60deg, will rotate the element 60deg anti-clockwise.
skew() function skews the element along the X and Y axis by the specified angles. It is written as skew(x deg, y deg). If the 'y deg' is not specified, it has a zero value.
transform-origin function allows you to change the position of transformed elements. It allows you to specify the location origin of the transform. By default, the origin is in the center of the element.
For example, if you are using the rotate property but want it to rotate from top left corner and not from the center, you can use the value 0% 0% or left top. You can try manipulating the values, and see the changes it does in the result.
Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.