Jump to content
Search Community

transformPerspective with zero rotation

OxXxigen test
Moderator Tag

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

thanks for the demo.

 

yes, the same thing would happen in real life if you took a very thick book and put it directly in front of your face. It would appear as a rectangle with no depth.

Is there a different result you are expecting? I'm not sure if you had a question or what you need help with.

  • Like 3
  • Haha 1
Link to comment
Share on other sites

Sorry, I'm a bit lost here.

I'm not that familiar with the ways the exact ways that browsers interpret and calculate perspective vs transform-origin.

 

My suggestion would be to build your cube using pure css and get it to render the way you want. If you have trouble animating it, let us know.

 

We really have to keep our support focused on the GSAP API and this seems to be more of a question relating to CSS. 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

You seem to be right about it,

 

1. Setting small rotationX works as expected.

2. Setting transform perspective from GSAP without rotationX doesn't work as expected.

3. Setting perspective in CSS works as expected.

 

See the Pen gKBzEz?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

You need to set perspective not transformPerspective. Even I got fooled by your demo. You are confusing transformOrigin and perspective.

 

 

  • Like 4
Link to comment
Share on other sites

Hello @OxXxigen and Welcome to the GreenSock Forum!

 

Also adding to all the great advice here ;)

 

If you want to prevent that you can also use transform-style: preserve-3d when you use perspective with zero rotation, to prevent the browser from switching it to flat.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

 

Just my two cents :)

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