Jump to content
Search Community

CSS plugin 3D transform... not 3D

st3f test
Moderator Tag

Recommended Posts

Hey @st3f and thanks for being a Shockingly Green member!

 

perspective is actually meant to go on the parent of elements that are being transformed in a 3D way. So if you apply perspective: 200px; to .container then it will work as you expected. transformPerspective actually sets the transform: perspective(); on the element, which is meant to be set on the element and not the parent.

 

Note that there are a lot of browser bugs in various browsers related to 3D transforms, especially with perspective, so sometimes it might take one or the other (or a combination) to get the effect that you're desiring. GSAP does its best to fix these errors but sometimes there are edge cases that you might need to play with a bit to get working.

 

A side note is that if you .set() a property (like perspective) and you're not wanting that to change, you don't need to also include it in your tweens like you did with the .to() in the example. The property will remain on your element(s) until it is removed or changed later.

 

Happy tweening!

  • Like 4
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...