Tengo un div que está centrado usando este css:
#r0 { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center; }Y este div se está rotando usando esto:
$('#r0').css('transform', 'rotateZ(' + xxx + 'deg)');
Pero necesito agregar otros divs a este div , pero establecer la propiedad de transform en este div coloca incorrectamente esos divs y provoca transformaciones no deseadas en ellos, lo cual es un comportamiento natural para ellos. Mi pregunta es si hay otra forma de rotar este div , por ejemplo, usando top y left , o cualquier otro método que no afecte a los niños adjuntos.
Cree un div interno dentro de ese div con una propiedad de transformación opuesta:
<div id="r0"> <div id="r0-inner"> ... </div> </div>y puedes negar la rotación con:
$('#r0').css('transform', 'rotateZ(' + xxx + 'deg)'); $('#r0-inner').css('transform', 'rotateZ(-' + xxx + 'deg)');Puede ir un paso más allá usando variables CSS para acortar su JS a una sola línea de código:
#r0 { --rotation: 0deg; transform: rotateZ(var(--rotation)); } #r0-inner { transform: rotateZ(calc(var(--rotation) * -1)); } $('#r0').css('--rotation', xxx + 'deg');