Jump to content


transformPerspective with zero rotation

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

transformPerspective is a perfect solution for rotation, but when node has zero rotation it looks like flat

See the Pen yERvNy by OxXxigen (@OxXxigen) on CodePen

Link to comment
Share on other sites

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

using perspective on the container you can offset the position of your cube relative to the "virtual camera" so you can see the sides of the cube.


See the Pen jKezLw?editors=0010 by GreenSock (@GreenSock) on CodePen


  • Like 2
Link to comment
Share on other sites

yes i know the difference.

i added another demo.
look at the second one, when i add to each side transformPerspective, looks not bad.

but... when i start rotation both looks different, and first looks better.

See the Pen PayRQz by OxXxigen (@OxXxigen) on CodePen


Link to comment
Share on other sites

i can be wrong, but i think that when using transformPerspective with zero rotation, transform matrix has no information about perspective, childs can't apply parent perspective and looks flat.

Link to comment
Share on other sites

i expect:

zero rotation: cube must looks like second one.

with rotation: cube must looks like first one.

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.




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.