>_
CodeXPal
🎨

CSS Transforms

Intermediate
90 XP
30 min
Lesson Content

CSS Transforms

CSS transforms allow you to modify the coordinate space of elements, enabling rotation, scaling, skewing, and translation (moving) without affecting the document flow.

Transform Functions

Translate (Move):

transform: translateX(50px);  /* Move right */
transform: translateY(20px);  /* Move down */
transform: translate(50px, 20px);  /* Move both */

Scale (Resize):

transform: scale(1.5);        /* Scale both axes */
transform: scaleX(2);        /* Scale horizontally */
transform: scaleY(0.5);      /* Scale vertically */
transform: scale(1.5, 0.8);  /* Scale x and y differently */

Rotate:

transform: rotate(45deg);    /* Rotate 45 degrees */
transform: rotate(90deg);    /* Rotate 90 degrees */

Skew:

transform: skewX(20deg);     /* Skew horizontally */
transform: skewY(10deg);     /* Skew vertically */
transform: skew(20deg, 10deg);

Combining Transforms

/* Multiple transforms - space separated */
.element {
  transform: translateX(50px) rotate(45deg) scale(1.2);
}

Transform Origin

Control the point around which transforms occur:

transform-origin: center;        /* Default */
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 0 0;           /* Top-left corner */

3D Transforms

transform: rotateX(45deg);   /* Rotate around X-axis */
transform: rotateY(45deg);   /* Rotate around Y-axis */
transform: rotateZ(45deg);   /* Rotate around Z-axis */
transform: translateZ(50px); /* Move in 3D space */

Common Use Cases

  • Hover effects (scale, rotate)
  • Card flips
  • Image galleries
  • Interactive buttons
  • Loading spinners
Example Code

Use transforms to create hover effects on a card.

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  width: 200px;
  height: 150px;
  background-color: #3b82f6;
  border-radius: 8px;
  transition: transform 0.3s ease;
  /* Add transform on hover: scale to 1.1 and rotate 5 degrees */
}

.card:hover {
  /* Your transform here */
}
</style>
</head>
<body>
  <div class="card"></div>
</body>
</html>

Expected Output:

Card with transform hover effect
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code