CSS 3 transform feature is used to change the shape or appearance of an HTML element either in two dimensions(
2D Transform) or three dimension(
3D Transform) using transform property.
The CSS3 transform is a process of transforming an HTML element. It is of two types.
It is used to transform the HTML element in two dimension direction such as
y-axis. It has followings important methods.
translate() method is used to transform an HTML element in the
translateX() function is used to to move an element along the
translateY() function is used to move an element along
scale() method is used to scale the HTML element along the
Y-axis, or both the axis. The scale contains one or two properties inside the parenthesis.
scale() method contains single properties then it scales the HTML element on both the
Y axis. If the
scale() method contains two properties then the first value is used to transform the HTML element in
X-axis and the second value transforms the HTML element in
skewX() function is used to skews an HTML element along the
X-axis by the specified angle.
skewY() function is used to skews an HTML element along the Y-axis by the specified angle.
Transform skew() function is used to skew the HTML element on the X-axis and Y-axis by the given angles.
rotate() function is used to rotate the HTML element along
Z-axis around its origin by the given angles. The origin of the rotating element can be defined using the transform-origin property.
Please keep in mind that the default transform-origin is the center center.
Followings are the transform origin property:
rotate(50deg) rotates the image in the clockwise direction about its origin by the angle of
50 degrees. You can use negative values to rotate the element counter-clockwise.
Let us rotate HTML element along z-axis by 180deg.
Let us rotate HTML element around
X-axis by 70deg.
Let us rotate, the HTML element around
Y-axis by 180deg.
matrix() function is a combination of
translateY(). It takes six parameters in the form of a matrix which can be written as
matrix(a, b, c, d, e, f).
so, in simple terms, the syntax is like –
d help in scaling up or down the elements. It is like
c skew the element in the
Y axis respectively. It is like
f help to translate the element(move the element) from one position to another. It is like