How to make child element not effected by parent element transform

I have a parent div that is a tilted box using skew transform. And I also have a child element contains text, but it also get tilted. I tried doing transform: none for the child but it didn’t work. (Using svelte)

<div class="tilt">
    <p class="remove-tilt">Hello</p>
</div>

<style>
    .tilt {
        transform: skew(-5deg);
    }

    .remove-tilt {
        transform: none;
    }
</style>

>Solution :

Neutralize the transformation:

.remove-tilt {

   transform: skew(5deg);

}

It’s probably best to target each element with better selectors.

div .tilt:not(p) {

   transform: skew(-5deg);

}