After the rotate is rotated, how to keep the text in it from being deformed

<div class="feixue"></div>
.feixue{
    transform:  perspective(0.5em) rotateX(10deg);
    transform-origin: bottom left;
    background: lightblue;
    display: inline-block;
    margin-bottom: 20px;
    
}

Code as above, the effect is as follows:

clipboard.png

Apr.13,2022

wrap the text in a div and rotate it in reverse


   

Menu