Tag transform-origin

The transform-origin property defines the point of origin (or pivot point) from which a CSS transformation is applied — especially important for rotate, scale, and skew transforms.

It determines where on the element the transformation starts.

---

🔹 Why Use transform-origin?

Imagine rotating a door:

• 🛑 If the hinge (origin) is in the middle, the whole door spins.
• ✅ If the hinge is on the left, it opens like a real door.

That hinge is the transform-origin.

---

📘 Syntax

selector {
  transform-origin: x-axis y-axis [z-axis];
}

• x-axis: horizontal (left, center, right, or % or px)
• y-axis: vertical (top, center, bottom, or % or px)
• z-axis: (optional, for 3D transforms)

---

💡 Value Examples

Value	What It Means
center center	Default. Transforms around the element’s center.
top left	Transforms from the top-left corner.
100% 0%	Right-top corner.
50% 100%	Bottom center.
25px 75px	Offset in px from top-left corner.
center center 50px	Adds 3D depth (Z-axis, rarely used)

---

✍️ Example: Rotate from Top Left

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

✅ The element rotates as if pinned at its top-left corner.

---

✍️ Example: Zoom from Bottom

.zoom:hover {
  transform: scale(1.3);
  transform-origin: bottom;
}

✅ The element grows upward, like it’s anchored at the bottom edge.

---

🖼️ Image Idea: Visual Demo of transform-origin

Image Panel:

• One square element
• Rotated 45° from different origins:
  • center
  • top left
  • bottom right

🎯 Purpose: Show how rotation pivots around different parts of the element.

---

🔁 Combine with transform

.card:hover {
  transform: rotate(10deg) scale(1.1);
  transform-origin: bottom right;
}

✅ Adds a tilt and zoom effect, anchored from the bottom right corner.

---

🧠 Pro Tips

• transform-origin supports percentages, keywords, and pixels.
• Works on inline-block, block, flex, and grid elements.
• Use with transition or animation for amazing hover effects.

---

✅ Summary

Property	transform-origin
What it controls	Pivot/anchor point of transforms
Default value	center center
Used with	transform, rotate, scale, skew
Common values	top left, center, 50% 100%, 10px 10px
Useful for	Advanced animations, rotation effects, scaling

---

🔚 Final Thought

transform-origin gives you precise control over motion and transformation effects. It’s the secret behind natural-feeling spins, zooms, and flips in UI animations.

---