CSS Transforms

Level : Advanced
Mentor: Shailendra Chauhan
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);
}
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this