透视文本不适合CSS

Question

我已经尝试了一切，使用CSS透视图使这个文本适合框。但它确实不适合任何形式。

我目前的代码：

<img src="./img/parcel.png" width="350px">
<div class="centerparcel">
Text on Box Here
</div>

.centerparcel：

position: absolute;
top: 65%;
left: 37.5%;
width: 285px;
font-size: 25px;
vertical-align: top;
transform: translate(-50%, -50%) rotateY(-30deg) rotateX(0deg);

但它只是看起来狭窄和压扁..

是否有额外的旋转功能可以使这更容易，或者我只是必须继续尝试，直到我做对了？

Answer 1

感谢CBroe通过评论帮助我解决这个问题，并添加了一些偏差以使效果正确＃。

直到现在我才知道歪斜是一种风格。

我解决的代码：

transform: translate(-50%, -50%) skewY(8deg);

Answer 2

尝试使用matrix转换

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

transform: matrix(1,.2,0,1,0,0);