CODEWITHSUNDEEP
htmlcssperspective
Michael Davison
Michael Davison

Reputation: 99

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?

Upvotes: 0

Views: 264

Answers (2)

Michael Davison
Michael Davison

Reputation: 99

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

Upvotes: 1

creme
creme

Reputation: 473

Try to transform it with matrix instead

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

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

Upvotes: 0

Related Questions