translate — moves elements from the current position (according to the X-axis and the Y-axis).
div {
transform: translate(50px, 100px);
}
rotate- rotates elements according to a given degree (in my case this method does’t work for span ).
div {
transform: rotate(45deg);
}
scale- increases or decreases the size of an element (based on parameters for the width and height).
div {
transform: scale(2, 3);
}
scaleX()-increases or decreases the width of an element.
div {
transform: scaleX(4);
}
scaleY()- method increases or decreases the height of an element.
div {
transform: scaleY(0.5);
}
skewX()-method skews an element along the X-axis by the given angle.
div {
transform: skewX(90deg);
}
skewY()-method skews an element along the Y-axis by the given angle.
div {
transform: skewY(40deg);
}
skew()-method skews an element along the X and Y-axis by the given angles.
div {
transform: skew(20deg, 10deg);
}
matrix()-combines all the 2D transform methods into one.
The parameters are : matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
transform: matrix(2, -2, 0, 3, 0, 5);
}
