Jump to content

Aamir Khan

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

Moderator Tag

Recommended Posts

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.


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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

If yes, please explain in codepen. how?

Link to comment
Share on other sites

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'.




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





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


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.