1

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?

TheIncal
  • 11
  • 2
  • 1
    any effect you place on the parent will affect the children. Why not rethink your structure to allow for your target element to have it's own tag – Kinglish Dec 23 '21 at 19:45
  • How about rotating the child elements in opposite direction? – Manas Khandelwal Dec 23 '21 at 19:45
  • Why exactly you are appending the other divs to this one in the first place? – Redu Dec 23 '21 at 19:47
  • @Kinglish, This is the sum of a month of work. I'm running out of Ideas and this is the last bug I'm trying to solve, then I'm done with this project, so you surely understand why I'm trying to accomplish this in this way. But thank you. – TheIncal Dec 23 '21 at 19:49
  • @Redu, it's a puzzle game I'm working on. – TheIncal Dec 23 '21 at 19:50
  • @TheIncal there are only two ways, either restructure the HTML code, so that the element that is rotated does not have children. Or if there is absolutely no way around that structure you need to calculate the inverse transformation yourself and apply it. – t.niese Dec 23 '21 at 19:51
  • @ManasKhandelwal, this may cause bigger problems with setting correct rotation. They are smaller than "#r0" and trying that have messed up positioning many times. – TheIncal Dec 23 '21 at 19:52
  • Trigonometry :) – Terry Dec 23 '21 at 20:35
  • @Terry, already tried many Trigonometry answers on so The problem is that there are PNG images inside this div with alpha channel which also are not uniform. So I had huge problems positioning them and rotating them. Therefore I had to stick them inside a div and rotate them, but this problem arose... – TheIncal Dec 23 '21 at 20:46

1 Answers1

0

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');
skara9
  • 4,042
  • 1
  • 6
  • 21
  • the idea is amazing, but in dev-tools at some `--rotation` value like `-10deg` or `180deg` the content will go outside the parent div – Laaouatni Anas Dec 23 '21 at 19:59
  • ah - if you want to hide the overflow then I guess css transform wouldn't be a good solution... i would look into maybe something like svg masks depending on your use case – skara9 Dec 23 '21 at 20:02
  • I tried that. created a parent div for 'r0' and rotated it backwards as you said. the problem is that it appears r0 is not rotated at all, even though they're poth rotating. There are images inside these divs that need to appear being rotated, so this approach, even though is nice and smart, kinda defeats the purpose. – TheIncal Dec 23 '21 at 20:12