如何使子元素不受父元素转换的影响

Question

我有一个父div，它是一个使用偏斜变换的倾斜框。我还有一个包含文本的子元素，但它也会倾斜。我试着做了一个改造：没有给孩子做，但没用。(使用苗条(

<div class="tilt">
<p class="remove-tilt">Hello</p>
</div>
<style>
.tilt {
transform: skew(-5deg);
}
.remove-tilt {
transform: none;
}
</style>

Answer 1

中和转换：

.remove-tilt {
transform: skew(5deg);
}

最好使用更好的选择器来针对每个元素。

div .tilt:not(p) {
transform: skew(-5deg);
}