Jump to content
Search Community

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

Aamir Khan test
Moderator Tag

Recommended Posts

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

 

  • 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.
×
×
  • Create New...