🎯 CSS Tutorial: transform-origin

📌 Introduction

The transform-origin property in CSS controls the **point around which a transform is applied**. When you rotate, scale, or skew an element using transform, the transformation occurs around a default center point — but transform-origin lets you change that pivot. This is extremely useful for animations, rotations, scaling effects, and UI micro-interactions. ✨

🎯 What Does transform-origin Control?

  • Sets the pivot point for transformations
  • Accepts keywords, lengths, or percentages
  • Can move the origin outside the element
  • Works with rotate, scale, skew, translate

✨ Syntax

Syntax

selector {
  transform-origin: <x-axis> <y-axis> <z-axis optional>;
}

Note

The **default** transform-origin is:
50% 50% 0 → center of the element.

🧩 Accepted Values

1. Keywords

Keyword Examples

transform-origin: left top;
transform-origin: center center;
transform-origin: right bottom;
  • left, center, right → x-axis
  • top, center, bottom → y-axis

2. Percentages

Based on element’s dimensions.

Percentage Example

transform-origin: 0% 50%; /* left center */
transform-origin: 100% 100%; /* bottom right */

3. Length Values (px, rem)

Length Example

transform-origin: 20px 40px;

4. 3D Transform Origin (optional z-axis)

3D Origin

transform-origin: 50% 50% 50px;

🔥 Practical Examples

1. Rotate From the Top

Rotate From Top

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

2. Scale From the Bottom

Scale From Bottom

.scale-bottom {
  transform-origin: bottom;
  transform: scaleY(1.5);
}

3. Door Opening Animation (hinge on left)

Door Animation

.door {
  transform-origin: left center;
  transform: rotateY(-70deg);
}

4. Tooltip Animation (grow from center-top)

Tooltip Origin

.tooltip {
  transform-origin: center top;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.tooltip.show {
  transform: scale(1);
}

5. Spinner Rotation Around Custom Point

Custom Spinner

.spinner {
  transform-origin: 50% 20%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

📊 transform-origin Cheat Sheet

ValuePivot Point
centerElement center (default)
left topTop-left corner
right bottomBottom-right corner
0% 100%Bottom-left edge
100% 0%Top-right edge

🧠 Tips & Best Practices

  • Always adjust transform-origin before animating transforms
  • Use percentages for responsive transformations
  • Use length values when you need pixel-precision pivot points
  • Combine with transition or animation for smooth effects
  • 3D transforms respond to z-axis origin adjustments
>>“A perfect animation starts with the perfect pivot — transform-origin gives you that control.” ✨

🎉 Conclusion

The transform-origin property is a key part of creating polished animations and transformations. By controlling the pivot point, you can rotate, scale, skew, and animate elements with precision and visual intention. Master it — and your interactive UI effects will instantly level up. 🚀