CSS TRANSFORMS
CSS 2D transforms Method: With the transform: property the 2D methods are
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
translate()
With the translate() method we can move one element from its current position like,
div {
transform: translate(50px, 100px);
}
Here translate(x, y) are assign as the value of x(horizontal) & y(vertical)
rotate()
We use the rorate() method so that we can rotate our element clockwise or anti clockwise like,
div {
transform: rotate(40deg);
}
rotate(x) can assign a positive degree value to rotate clockwise and a negative degree to rotate anti-clockwise.
scale()
With scale() we can increase or can decrease element height and with.
div {
transform: scale(2, 3);
}
Here the first value assign with and the second value stands for height.
skew()
The skew method skews an element in order of X-axis and Y-axis with angle.
div {
transform: scale(2deg, 3deg);
}
Here first value assigns X-axis and the second value assigns Y-axis. skewY() only for Y-axis with one value, skewX() only for X-axis with one value.
matrix()
The matrix method is the combination of all transform methods.
div {
transform: matrix(2, 3, 4, 4, 2, 4);
}
CSS 3D transforms Method: With the transform: property the 3D
- methods are
- rotateX()
- rotateY()
- rotateZ()
rotateX()
RotateX method rotates an element in X-axis with degree value.
div {
transform: rotateX(2deg);
}
rotateY()
RotateY method rotates an element in Y-axis with degree value.
div {
transform: rotateX(2deg);
}
rotateZ()
RotateZ method rotates an element in Z-axis with degree value.
div {
transform: rotateX(2deg);
}
Top comments (0)