Jump to content
Search Community

setting perspective ignores z-Index

hemmoleg 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

It's a bit more complicated than that...

 

(And the 9999 alone shouldn't work)

 

First I'd say, read both links @OSUblake has posted, they are crucial. Then, read the docs about perspective:

 

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

https://css-tricks.com/almanac/properties/p/perspective/

 

The key gotcha is the fact that setting 'perspective' in CSS (in this case GSAP) creates a new stacking-context on the element but visually affects the children.

 

You have a perspective set on the 'td' element of your table, that creates a stacking context on each 'td' element that is independent from each sibling. All children of those 'td' are contained within each context and can't possibly raise higher than it's parent's siblings. Think of each sibling stacking-context as a mini universe in its own, independent and unaware of others.

 

As it pains me to say, it is expected behaviour.

 

I am not sure what is the end result that you are after but, in order to have the blue box on top of all the other green boxes and have some perspective distortion, you need to plan where your stacking context is going to be.

 

Here's a fork of your pen with a hack to make it work.

 

See the Pen eyroaO by dipscom (@dipscom) on CodePen

 

 

ps (opinion piece): It really is silly to be putting z-indexs on the thousands.... If your stacking context is wrong, it won't make a difference if you have z-index:1 or z-index:3,000,000 - If anything, it's a lot easier to keep track of the z-index if you are in the single digits. If you need more than 10 levels within one context, you might want to re-think your strategy.

 

  • Like 4
Link to comment
Share on other sites

In case you didn't see my post, I added a little tip about being able to view stacking contexts with Chrome's dev tools. I just noticed it a couple of weeks ago, so I don't think it's visible by default. If you don't see a tab for it, you might have to click on the more options icon in the right corner > More tools > Layers.

 

 

Link to comment
Share on other sites

Ohhhhhh, that's news to me.

 

I was aware there was something of the sort in Firefox but not in Chrome.

 

I have moved back to Firefox these days, trying to do most of my developing there and only using the other browsers to bug hunt anomalies.

 

Nice tip, Blake.

Link to comment
Share on other sites

1 minute ago, Dipscom said:

I was aware there was something of the sort in Firefox but not in Chrome.

 

I remember playing with one in Firefox a couple of years ago, but I can't find it anymore. Not sure if they removed it, or I just can't find it.

 

And I hear ya on Firefox. I really love the way it's looking these days, but it's performance is really bad on my graphics card for some reason. Not sure what the issue is, but it's an artifact factory. If and when that gets resolved, I would like to start using it more.

 

Link to comment
Share on other sites

2 minutes ago, OSUblake said:

I remember playing with one in Firefox a couple of years ago, but I can't find it anymore. Not sure if they removed it, or I just can't find it.

 

It used to have all sorts of tools in it. WebGL, Shaders, the kitchen sink... I think a lot of the unused bit were tucked away or are no longer available due to lack of use. I need to get the habit of using their developer edition to dev on as well. There seem to be a ton of extra goodies there for the likes of us.

Link to comment
Share on other sites

Thanks for your answers. Yesterday after starting this thread i kept reading a lot about perspective and zIndex. I also already tried Dipscom's 'hack'. Unfortunately its not applicable to my project.  I guess i will try something a little different now.

Link to comment
Share on other sites

sure, have a look at this. its basically a bunch of '1024' boards (the mobile game) next to each other. the inputs for each board a generated randomly. Now the whole perspective thing started when i wanted to have a 'spinning merging animation'. This means when two pieces with the same value 'merge', the piece should spin around its y-axis. Now to have a proper 3d effect i had to set a perspective somewhere and at first i thought i want to have a perspective at each td but this would disregard the moving 'camera'. So now what i do is, i have all the boards in one div (#tableContainer) and this div receives a perspective and i constantly update the perspective-origin while the 'camera' is moving.

Also that brings me to another question: i move the 'camera' like this

TweenMax.to($('#tableContainer'), 45, {bezier:{curviness:1.2, values:anchors}, ease:Power0.easeInOut,onUpdate:this.Update, repeat: -1});

So i fake the camera movement by constatly translating the #tableContainer.

In the Update method i manualy recalculate the #tableContainer perspective-origin. But i think this is not the best way to do it. Do you know a better to update the perspective origin?

Link to comment
Share on other sites

Hummmm.

 

I've got no idea what game is this that you are refering to. I do have a vague impression of what you are trying to achieve.

 

From what you are describing, nothing springs to mind as a way to update the perspective-origin in this scenario.

 

However, what does spring to mind is the question: Are you using the right tool for the job? Would you not benefit from a different setup? Or even a different technique? If you are going to recreate a game and want to use 3D perspective, would you not be better off with a library that's designed for that?

 

You could try having your '#tableContainer' not moving, that would stop you having to change the perspective-origin but that would mean you having now to translate all the children inside it.

 

So, maybe a 3D specialist library?

  • 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.
×
×
  • Create New...