En el siguiente ejemplo, solo el primer Hello se reduce a 0,8. El segundo mantiene su escala original (1,-1) ignorando la transformación principal.
Quiero que las transformaciones de los padres estén encadenadas.
Sé que puedo aplicar la transformación directamente en el div y afectaría a ambos niños al mismo tiempo, pero quiero que cada niño se transforme de forma independiente, no juntos, por eso estoy usando css vars aquí (es sutil pero hay una diferencia) mira aquí para verlo
Necesito alguna forma de hacer esto manteniendo solo una var css (porque tendré múltiples divs anidados con diferentes transformaciones consecutivas aplicadas en los párrafos internos).
Por favor, cualquier idea es realmente apreciada, usaré js si realmente es necesario.
p { transform: var(--transf); } <div style="--transf: scale(0.8)"> <div><p>Hello</p></div> <div style="--transf: scale(1,-1);"><p>Hello</p></div> </div>Tal vez esto pueda funcionar para ti.
Parece que no puedo encontrar una manera de "encadenar" cadenas de funciones de transformación.
Pero puede establecer una base de valores predeterminados y aplicar muchas transformaciones a p elementos y establecer los valores apropiados en cada nivel, lo que puede generar un efecto en cadena debido a la cascada.
/* You can extend this for as many properties as you need*/ div.base { --scaleX : 1; --scaleY : 1; --rotate : 0deg; --translateX : 0px; --translateY : 0px; } div div { width: 200px; } /* Likewise you can extend the transform function as you need*/ p { border: 1px dashed gray; transform: scale(var(--scaleX), var(--scaleY)) rotate(var(--rotate)) translate(var(--translateX), var(--translateY)); } <div class="base"> <div style="--scaleX:.8; --rotate:45deg; --translateX:80px;"> <p>Hello 1</p> </div> <div style="--scaleY:-1;"> <p>Hello 2</p> </div> <div style="--scaleX: .5; --scaleY:.5; --rotate:60deg;"> <p>Hello 3</p> </div> </div>