Transform Origin Menu

A popover menu scales open from its top-right corner by pairing transform-origin with an open class.

Program

transform-origin changes the pivot point for scale and rotate transforms. Popovers often grow from the edge that anchors them.

transform_origin_menu.html

<style>
  .menu { transform-origin: top right; transform: scale(.85); opacity: .45; }
  .menu.open { transform: scale(1); opacity: 1; }
</style>
<nav class="menu open"><a>Profile</a><a>Settings</a><a>Sign out</a></nav>

transform-origin transform-origin chooses the pivot point for transforms.

scale scale grows or shrinks an element without changing document flow.