✨ CSS Transform — Move, Rotate, Scale Elements

Last Updated: November 2025

The CSS transform property lets you move, rotate, scale, or skew elements without changing their actual layout position. It’s like performing 3D magic 🎩 on your webpage.

🗣 Hinglish Tip: Transform ka matlab hai — “element ko badle hue angle, size, ya position me dikhana bina layout todhe.”

transform: function(value);

You can apply multiple functions by separating them with spaces:

transform: translateX(50px) rotate(30deg) scale(1.2);

🧩 Transform Functions

Function	Description	Example
translate(x, y)	Moves the element along X & Y axis	transform: translate(50px, 100px);
translateX(x) / translateY(y)	Moves element only horizontally or vertically	transform: translateX(100px);
rotate(angle)	Rotates the element clockwise (negative for counterclockwise)	transform: rotate(45deg);
scale(x, y)	Resizes the element along X & Y axis	transform: scale(1.5, 1.5);
skew(x-angle, y-angle)	Tilts the element along X & Y axes	transform: skew(20deg, 10deg);
matrix(a, b, c, d, e, f)	Combines multiple transforms in a single function (advanced)	transform: matrix(1, 0.3, 0.5, 1, 30, 20);

Translate (Move)

.move {
  width: 100px;
  height: 100px;
  background: tomato;
  transform: translate(50px, 100px);
}

Moves the box 50px right and 100px down.

Rotate

.rotate {
  width: 100px;
  height: 100px;
  background: skyblue;
  transform: rotate(45deg);
}

Rotates the box 45 degrees clockwise.

Scale (Zoom In/Out)

.scale {
  width: 100px;
  height: 100px;
  background: orange;
  transition: transform 0.3s;
}

.scale:hover {
  transform: scale(1.5);
}

Increases size when hovered.

🗣 Hinglish Tip: Scale(2) = 2x bada; Scale(0.5) = aadha chhota.

Skew (Tilt)

.skew {
  width: 100px;
  height: 100px;
  background: lightgreen;
  transform: skew(20deg, 10deg);
}

Tilts the box diagonally.

Multiple Transforms

.combo {
  width: 100px;
  height: 100px;
  background: violet;
  transform: translateX(50px) rotate(30deg) scale(1.2);
}

Moves, rotates, and scales together 🎯

3D Transforms

.cube {
  width: 100px;
  height: 100px;
  background: coral;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
}

Adds 3D perspective using rotateX and rotateY.

Transform Origin

Defines the point around which transformations occur.

div {
  transform: rotate(45deg);
  transform-origin: top left;
}

Rotates around top-left corner instead of center.

Value Description

center Default rotation point
top left / bottom right Corner points
% Custom origin (e.g. 25% 75%)

⚙️ Example: Rotation Around Corner

.corner {
  width: 120px;
  height: 120px;
  background: gold;
  transform-origin: top left;
  transform: rotate(45deg);
}

Spins around top-left instead of center.

🧮 Matrix

Matrix combines translate, scale, rotate, and skew in a single function:

transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY);

Example:

transform: matrix(1, 0.3, 0.5, 1, 40, 20);

🗣 Hinglish Tip:Matrix = ek hi formula me sab mix — par rarely manually likha jata hai 😅

← Previous Next →