rotate旋转后，如何使里面的文字不变形

Question

<div class="feixue">飞雪连天射白鹿</div>

.feixue{
    transform:  perspective(0.5em) rotateX(10deg);
    transform-origin: bottom left;
    background: lightblue;
    display: inline-block;
    margin-bottom: 20px;
    
}

代码如上，效果如下：

Answer 1

.feixue{
    position: relative;
    transform:  perspective(0.5em) rotateX(10deg);
    transform-origin: bottom left;
    background: lightblue;
    display: inline-block;
    margin-bottom: 20px;
    
}
.feixue::after {
    display: inline-block;
    content: '飞雪连天射白鹿';
    transform:  perspective(0.5em) rotateX(-10deg);
    transform-origin: bottom left;
}

 <div class="feixue"></div>

Answer 2

用个div把文字包起来，反向旋转就好了