Part 47: Transform Origin & 3D Perspective Concepts

The origin property sets the point around which transformations occur (the anchor point).

1. Transform Origin Utilities

• origin-center (default)
• origin-top
• origin-bottom
• origin-left
• origin-top-left

Expanding Menu Dropdown Animation:

<div class="origin-top-right transition-all duration-200 scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 absolute right-0 w-48 bg-white rounded-lg shadow-xl p-2">
  Menu Items
</div>

Key Takeaways

• Set origin-top-right on dropdowns aligned to the right edge so they expand naturally from their origin.

In Part 48, we will explore Built-in Animations: Spin, Ping, Pulse & Bounce!