CSS — Part-7- Transform
CSS transforms allow you to move, rotate, scale, and skew elements.
It modifies the coordinate space of the CSS visual formatting model.
A transformation is applied to the coordinate system an element renders into through the transform property.
2D Transform Methods
The methods for 2D Transforms are —
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
The translate() Method
- The
translate()
method moves an element from its current position to top/left/bottom/right (according to the parameters given for the X-axis and the Y-axis). - These values would be any length value, like 10px or 2.4em
div {
transform: translate(50px, 100px);
}
The rotate() Method
- The
rotate()
method rotates an element clockwise or counter-clockwise according to a given degree. - Using negative values will rotate the element counter-clockwise.
div {
transform: rotate(20deg);
}div {
transform: rotate(-20deg);
}
The scale() Method
- The
scale()
method increases or decreases the size of an element - The below example increases the <div> element to be two times of its original width, and three times of its original height
div {
transform: scale(2, 3);
}
The scaleX() Method
- The
scaleX()
method increases or decreases the width of an element.
Double the width :-
div {
transform: scaleX(2); // doubles the width
}
Half of the width:-
div {
transform: scaleX(0.5);
}
The scaleY() Method
- The
scaleY()
method increases or decreases the height of an element.
Three times of the height:
- Without scaleY
div {
margin: 150px;
width: 200px;
height: 100px;
border: 1px solid black;
}
- With ScaleY(3)
div {
margin: 150px;
width: 200px;
height: 100px;
border: 1px solid black;
transform: scaleY(3);
}
The skewX() Method
The skewX()
method skews an element along the X-axis by the given angle.
div {
transform: skewX(20deg);
}
The skewY() Method
The skewY()
method skews an element along the Y-axis by the given angle.
div {
transform: skewY(20deg);
}
The skew() Method
The skew()
method skews an element along the X and Y-axis by the given angles
div {
transform: skew(20deg, 10deg);
}
In the below example the second value is not present so it is considered as 0.
It skews the div by 20 degrees along x-axis.
div {
transform: skew(20deg);
}
The matrix() Method
- The
matrix()
method combines all the 2D transform methods into one. - It has six parameters.
- The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
div {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
CSS 3D Transforms
3D Transforms Methods
rotateX()
rotateY()
rotateZ()
The rotateX() Method
- The
rotateX()
method rotates an element around its X-axis at a given degree:
#myDiv {
transform: rotateX(150deg);
}
The rotateY() Method
- The
rotateY()
method rotates an element around its Y-axis at a given degree:
#myDiv {
transform: rotateY(150deg);
}
The rotateZ() Method
- The
rotateZ()
method rotates an element around its Z-axis at a given degree:
#myDiv {
transform: rotateZ(90deg);
}
Sources:-
W3Schools