Necesito aplicar una transformación de scale y skew a un div, pero al realizar dicha transformación resulta que también se le aplica a los elementos hijos.
¿Como hago para que los elementos hijos omitan esa propiedad?
Necesito aplicar una transformación de scale y skew a un div, pero al realizar dicha transformación resulta que también se le aplica a los elementos hijos.
¿Como hago para que los elementos hijos omitan esa propiedad?
Realmente, como ya te han comentado, se podría realizar esto simplemente revirtiendo el valor de la transformación para los elementos hijos. Sin embargo, yo usaría el selector #padre > *
o padre *
para indicar que todos los hijos de ese padre, sean el elemento que sean, reviertan dicha propiedad (el primer selector haría referencia a los hijos directos del padre y el segundo a cualquier elemento dentro del padre).
También añadiría un ID si es solamente un elemento el que va a ser transformado o una clase si van a ser varios elementos transformados con las mismas propiedades pero si pones div
harás referencia a cada uno de los elementos div
de tu página.
También tendrás que tener en cuenta si tienes elementos inline
dentro de tu contenedor padre o no, ya que estos no aplicarán ninguna transformación y por tanto no podrán revertir tampoco la transformación del elemento padre. Para que esta transformación sea posible deberás indicar que tus elementos inline
se comporten como inline-block
o block
.
Tomando como referencia el ejemplo de la otra respuesta:
.distorsionado {
padding: 20px;
background: red;
color: white;
transform: skew(30deg) scale(1.5);
max-width:200px;
margin:50px auto;
text-align:center;
}
.divHijo{
height: 50px;
width: 50px;
background-color: blue;
}
.distorsionado.not > *{
transform: skew(-30deg) scale(.66);
}
#padre > *{
display: block;
transform: skew(-30deg) scale(.66);
}
<h3>Los elementos hijos heredando del padre.</h3>
<div class="distorsionado">
<p>Distorsionado</p>
<div class="divHijo">Esto es un div</div>
<span>Distorsionado</span>
</div>
<h3>Los elementos hijos que son inline-block o block sin herencia.</h3>
<h3>Elementos inline no aplican esta reversión. </h3>
<div class="distorsionado not">
<p>No Distorsionado</p>
<div class="divHijo">Esto es un div</div>
<span>Distorsionado</span>
</div>
<h3>Ninguno de los elemento hijos tiene herencia.</h3>
<h3>Todos son tratados como block.</h3>
<div id="padre" class="distorsionado">
<p>No Distorsionado</p>
<div class="divHijo">Esto es un div</div>
<span>No distorsionado</span>
</div>
Evitar que las propiedades afecten a los elementos hijos no es posible. Usualmente lo que se hace es revertir las propiedades del padre, algo por este estilo:
div {
padding: 20px;
background: red;
color: white;
transform: skew(30deg) scale(1.5);
max-width:200px;
margin:50px auto;
text-align:center;
}
div.not p {
transform: skew(-30deg) scale(.66);
}
<div>
<p>Distorsionado</p>
</div>
<div class="not">
<p>No Distorsionar</p>
</div>
.5
lo que hace que su tamaño original sea 2/3 del actual ... por tanto para revertir el aumento ahora necesito un elemento de 2/3 de tamaño osea .66
; es un aproximado creo que es la propiedad mas complicada de revertir
1 / escala
... Ejemplo: 1 / 1.5 = 0.66667