I have a div that is centered using this css:
#r0 {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform-origin: center;
}
And this div is being rotated using this:
$('#r0').css('transform', 'rotateZ(' + xxx + 'deg)');
But I need to append other divs to this div, but setting transform property on this div mispositions those divs and causes unwanted transformations on them, which is natural behavior for them. My question is that is there another way to rotate this div, for example, using top and left, or any other method that wouldn't affect appended children?
Create an inner div within that div with an opposite transform property:
<div id="r0">
<div id="r0-inner">
...
</div>
</div>
and you can negate the rotation with:
$('#r0').css('transform', 'rotateZ(' + xxx + 'deg)');
$('#r0-inner').css('transform', 'rotateZ(-' + xxx + 'deg)');
You can go a step further using CSS variables to shorten your JS to only one line of code:
#r0 {
--rotation: 0deg;
transform: rotateZ(var(--rotation));
}
#r0-inner {
transform: rotateZ(calc(var(--rotation) * -1));
}
$('#r0').css('--rotation', xxx + 'deg');