CSS plugin 3D transform... not 3D

[st3f]

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.

[mikel]

Hey @st3f,

 

You could add a transformPerspective :

 

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

 

Happy tweening ...

Mikel

 

 

[st3f]

OMG, it was that easy...

Sorry, and thank you 3000 @mikel

[ZachSaucier]

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!

[st3f]

Thanks a lot, Zach, for the kind explanations

 

Ciao!