透视文字不适合 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

尝试用 matrix 来转换它

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

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

Answer 2

感谢 CBroe 通过评论帮助我解决这个问题，'add some skewing to get the effect right'。

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

我解决的代码：

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

透视文字不适合 CSS

Perspective Text wont fit in CSS

html

css

perspective