Hi Everyone,
I am trying to understand what is really happening “3d” world of CSS.
I made a simple example http://codepen.io/anon/pen/dXvEWw
The thing which is not clear to me is why when you hover over .inner, its background color (gold) is not visible?? If you remove the transform property from .back or if you set the rotateY to 0deg then the gold background color of the .inner is clearly visible.
Why is the transform property of .back changing the stacking order?
Logically it makes sense that children(.front and .back) should appear in front of their parent(.inner) and transform property should not change that, at least to me.
Thats why I am expecting that when you rotate the .inner by 180deg, stacking order should remain the same but in reverse order.
Also, I would like to know what really happens when you set transform-style to flat? Does that make parent and all of its children collapsed into single “unit” where element with highest stacking order take priority?
What am I missing?
