Fixing the Drift in Shape Rotations
Publikováno: 4.11.2021
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 …
The post Fixing the Drift in Shape Rotations appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
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.
To Shared Link — Permalink on CSS-Tricks
The post Fixing the Drift in Shape Rotations appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.