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