Search code examples
htmlcssperspective

Perspective Text wont fit in CSS

I have tried absolutely everything to make this text fit the box using CSS perspective. But it literally just wont fit in any form.

My current code:

<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);

but it just looks cramped and squashed..

enter image description here

Is there an extra rotate feature that could make this easier, or do I just have to keep trying until I get it right?

Solution

  • Thanks to CBroe for helping me solve this by commenting, 'add some skewing to get the effect right'.

    I never knew skew was a style until now.

    My solved code:

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