transformPerspective with zero rotation

[OxXxigen 0 Likes (Newbie)]

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

[Carl 11,326 Likes (Superhero)]

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.

[Carl 11,326 Likes (Superhero)]

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

 

[OxXxigen 0 Likes (Newbie)]

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

 

[OxXxigen 0 Likes (Newbie)]

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.

[OxXxigen 0 Likes (Newbie)]

i expect:

zero rotation: cube must looks like second one.

with rotation: cube must looks like first one.

[Carl 11,326 Likes (Superhero)]

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. 

 

 

 

 

[Sahil 2,657 Likes (Superhero)]

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.

 

 

[Jonathan 5,394 Likes (Superhero)]

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