Fixing the Drift in Shape Rotations

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Steve Ruiz calls this post an “extra-obscure edition of design tool micro-UX,” but I find it fascinating! If you select a bunch of elements in a design tool, then rotate then, then later select those same elements and try to rotate them back, you’ll find they have “drifted” a bit from the original location.

It’s because the selection of elements needs to rotate around a center (the transform-origin, in CSS parlance), but where that center is located is calculated differently post-rotation. The trick, if any particular design tool cares to fix it:

[…] here’s the fix: once a user starts a rotation, we hold onto the the center point; if the user rotates again, we re-use that same point; and we only give it up once the user makes a new selection.

There’s a related tweet thread.

Direct Link →