My dilemma lies within a div containing numerous draggable items. When I select and group multiple items, rotating them together as a group works seamlessly – that is, unless the individual items had prior rotations applied to them.
The issue arises when individual items possess local rotations from before, resulting in deviations in position and functionality of the group rotation.
I believe the root of the problem stems from the differing transform-origin values used for individual rotations compared to group rotations. While item rotations use 50% 50% as the center point, rotating a group necessitates a new origin at the center of the group.
For example, if item1 initially had a local rotation of 45 degrees and was then grouped with other items and collectively rotated by 30 degrees, item1 should have a total rotation of 45 degrees relative to itself and 30 degrees in relation to the center of the group.
CSS3 only allows for one transform-origin, making it challenging to combine different transformations on an item with distinct origins. Despite my attempts with matrices, the results are unsatisfactory when dealing with items that already have rotations. Everything functions perfectly if there are no prior rotations on the items, allowing the group to rotate smoothly around its center. However, things fall apart when items contain individual rotations.
Therefore, my question pertains to how we can integrate two rotations (or any transformations) on the same item with varying transform-origins, such as a local rotation and a group rotation.