Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
st3f

CSS plugin 3D transform... not 3D

Recommended Posts

Bonjour People,

I've just started playing with the CSS plugin. I basically copied and pasted the code in "3D transforms and more CSS..."

section "transformOrigin", but... my box is not rotating in perspective. What am I missing?

 

Thank you

 

See the Pen JjjpbqY by st3f (@st3f) on CodePen

Link to post
Share on other sites

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 post
Share on other sites

Thanks a lot, Zach, for the kind explanations :)

 

Ciao!

  • Like 1
Link to post
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.

×