How to apply perspective effect on text with shape(trapezoid)

[Aamir Khan 1 Likes (Newbie)]

Hi, I want to create a effect on text like in the attached svg/image Lorem Ipsum is written on Trapezoid shape.

 

Here is the link of my codepen(). I want to apply the same effect on text as Lorem Ipsum is having with the trapezoid in the attached svg.

 

Please help.

POV_3.svg

See the Pen wvEZNgz by khanaamir (@khanaamir) on CodePen

[GreenSock 18,567 Likes (Superhero)]

SVG doesn’t accommodate 3D transforms, no. That’s a spec thing, totally unrelated to GSAP. You can apply a 3D transform to an entire <svg> element, of course, but not just children. 

[Aamir Khan 1 Likes (Newbie)]

can I have this effect if I use div (html) instead of svg?

If yes, please explain in codepen. how?

[akapowl 5,215 Likes (Superhero)]

5 hours ago, Aamir Khan said:

can I have this effect if I use div (html) instead of svg?

 

Sure you can. But getting that setup right has nothing to do with GSAP - it's just CSS styling.

 

This right here is the second result of a google search for '3d perspective div with text'.

 

https://3dtransforms.desandro.com/perspective

 

See the Pen PodvVGo by akapowl (@akapowl) on CodePen

 

 

Edit:

 

When you're going to animate it with GSAP, it will be best to set the perspective on the parent element.

 

Click anywhere in the pen to run the animation.

 

See the Pen GRXazdJ by akapowl (@akapowl) on CodePen

 

And if you want to animate the box and text individually, you will probably be best to not have them nested, e.g. like so.

 

Still, those are mostly CSS related things to consider. I hope that will help.

 

See the Pen dyqEaWr by akapowl (@akapowl) on CodePen

 

[Aamir Khan 1 Likes (Newbie)]

Thanks