Fixing the Drift in Shape Rotations

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.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

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 LinkPermalink 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.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-11-04T17:52:29+00:00) Fixing the Drift in Shape Rotations. Retrieved from https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/

MLA
" » Fixing the Drift in Shape Rotations." Chris Coyier | Sciencx - Thursday November 4, 2021, https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/
HARVARD
Chris Coyier | Sciencx Thursday November 4, 2021 » Fixing the Drift in Shape Rotations., viewed ,<https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/>
VANCOUVER
Chris Coyier | Sciencx - » Fixing the Drift in Shape Rotations. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/
CHICAGO
" » Fixing the Drift in Shape Rotations." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/
IEEE
" » Fixing the Drift in Shape Rotations." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/. [Accessed: ]
rf:citation
» Fixing the Drift in Shape Rotations | Chris Coyier | Sciencx | https://www.scien.cx/2021/11/04/fixing-the-drift-in-shape-rotations-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.