CSS Transforms
Duration : 00:02:30
CSS Transform translate():
Moves an element along the X and Y axes.Example:
.transformed-element {
transform: translate(50px, 20px);
}
CSS Transform rotate():
Rotates an element by a specified angle.Example:
.transformed-element {
transform: rotate(45deg);
}
CSS Transform scaleX():
Scales an element horizontally.Example:
.transformed-element {
transform: scaleX(1.5);
}
CSS Transform scaleY():
Scales an element vertically.Example:
.transformed-element {
transform: scaleY(0.8);
}
CSS Transform scale():
Scales an element uniformly in both X and Y directions.Example:
.transformed-element {
transform: scale(2);
}
CSS Transform skewX():
Skews an element along the X axis.Example:
.transformed-element {
transform: skewX(30deg);
}
CSS Transform skewY():
Skews an element along the Y axis.Example:
.transformed-element {
transform: skewY(20deg);
}
CSS Transform skew():
Skews an element along both X and Y axes.Example:
.transformed-element {
transform: skew(10deg, 15deg);
}
CSS Transform matrix():
Applies a 2D transformation using a matrix of values.Example:
.transformed-element {
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}
CSS Transform rotateX():
Rotates an element around the X axis.Example:
.transformed-element {
transform: rotateX(90deg);
}
CSS Transform rotateY():
Rotates an element around the Y axis.Example:
.transformed-element {
transform: rotateY(180deg);
}
CSS Transform rotateZ():
Rotates an element around the Z axis (typically for 3D transforms).Example:
.transformed-element {
transform: rotateZ(60deg);
}
Still have some questions? Let's discuss.
CONTACT US
Unlimited live sessions
Quick Notes
Hands-on labs
Real-world projects
Interview Q&A