I need to apply a transformation of scale and skew to a div, but when doing this transformation it is also applied to the children elements.
How do I make the child elements omit that property?
I need to apply a transformation of scale and skew to a div, but when doing this transformation it is also applied to the children elements.
How do I make the child elements omit that property?
Actually, as you have already been told, you could do this simply by reversing the value of the transformation for the children elements. However, I would use the selector #padre > * or padre * to indicate that all the children of that parent, whatever element they are, revert that property (the first selector would refer to the direct children of the father and the second to any element within the father).
I would also add an ID if it is only one element that is going to be transformed or a class if there are going to be several elements transformed with the same properties but if you put div you will refer to each of the elements div of your page.
You will also have to take into account if you have inline elements inside your parent container or not, since these will not apply any transformation and therefore they will not be able to reverse the transformation of the parent element either. For this transformation to be possible, you must indicate that your inline elements behave as inline-block or block .
Taking as reference the example of the other answer:
.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>Preventing the properties from affecting the child elements is not possible. Usually what is done is to reverse the properties of the father, something like this:
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>