Jump to content
GreenSock

xstudios.agency

3D Transformation Woes

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Having trouble understanding 3D transformations. I took a look at this page: https://greensock.com/css3/, but while they provide great demos, the code isn't shown so I can analyze and learn from it.  In my pen demo (

), I'm struggling to understand why my transforms do not animate smoothly to a 90 degree rotationY.  When the animation starts it jumps and then animates the rest of the way...of course not the intended effect.  Any assistance is appreciated.

 

UPDATE:

Ok, so I figured out I guess the parent container needed a perspective set.  Now they animate smoothly, but at 90 degrees I'd expect them to disappear and I can still see them on an angle?

See the Pen yNRQNx by xstudios (@xstudios) on CodePen

Link to comment
Share on other sites

Glad you figured it out. 

 

As for 90 degrees causing them to disappear, no, that's not how it works because of perspective. Imagine standing on a street looking toward the horizon line - even if the buildings on each side of you may technically be angled away from you at 90 degrees, you still see them because of perspective. The only time they'd disappear is if they're DIRECTLY in front of the center of the camera. You could, of course, change the perspective and basically remove it, but then you lose the 3D feel of it. 

 

See what I mean?

  • Like 1
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.
×