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

Share this post


Link to post
Share on other sites

Hey @st3f,

 

You could add a transformPerspective :

 

See the Pen MWWQJOY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

OMG, it was that easy...

Sorry, and thank you 3000 @mikel :)

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

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

 

Ciao!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×