1

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Xanthan
  • 131
  • 1
  • 9
  • 1
    A child is always affected by the parent, but sometimes you can use a reverse transform on the child (probably most of the answers you'll get). Maybe consider restructuring into "non-tilted parent" that contains "background that is tilted" + "p which is not tilted" – qrsngky Jul 28 '22 at 07:45

1 Answers1

1

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);

}
HasanTheSyrian_
  • 140
  • 1
  • 6