HTML & CSS - Mastery / Advanced CSS Features

Transforms: Scale, Rotate, Translate

🤖 CSS transform

CSS transform lets you visually manipulate elements — move, rotate, resize, or skew them — without affecting the document flow.

✅ General Syntax

selector {
  transform: function(value);
}

Multiple transforms can be combined:

transform: scale(1.2) rotate(15deg) translateX(20px);

🔹 Scale

Resizes the element — larger or smaller, horizontally and/or vertically.

📌 Syntax

transform: scale(x);         /* uniform scale */
transform: scale(x, y);      /* scaleX and scaleY separately */

📌 Examples:

🔹 Rotate

Rotates the element around its center (by default).

📌 Syntax:

transform: rotate(angle);

  • Angles in degrees (deg), radians (rad), turns (turn)

📌 Examples

<div class="box">Rotated</div>

🔹Translate

Moves the element from its current position, without affecting layout.

📌 Syntax:

transform: translate(x, y);
transform: translateX(value);
transform: translateY(value);

📌 Examples:

<div class="container">
   <div class="box">→ ↓</div>
   <div class="box-left">←</div>
   <div class="box-up">↑</div>
</div>

🔹Combining Multiple Transforms

You can chain multiple transform functions:

<body>
  <div class="box">Transform</div>
</body>

🔹 Transform Origin

Change the pivot point (default is center):

transform-origin: top left;
<body>
  <div class="box">↻</div>
</body>

🔹 Transition (Smooth Movement)

You can use transition to animate transforms smoothly:

<body>
  <div class="box">Hover Me</div>
</body>

✅ Summary Table

Transform

Description

Example

scale()

Resize the element

scale(1.5)

rotate()

Rotate the element

rotate(45deg)

translate()

Move the element

translate(50px, -20px)

transform

Combine multiple effects

scale(1.1) rotate(10deg)

origin

Set pivot point for transformations

transform-origin: top left