I think it’s a separate issue. I looked at this previously in Slack for Alex but I think it is just the nature of how background images are set up. Take the spec for example. It clearly states that the first image declared will be on top no matter what.
TBH this is only fixed (AFAIK) by switching the background image order on hover, as below
http://codepen.io/ryanreese09/pen/zGRJKV?editors=110
Not sure why I didn’t spot this earlier.
The spec doesn’t really state what is supposed to happen on transform for backface, so the sure-fire way would be to do it as I’ve done.
It’ll depend on the situation but you’ll actually want different images for this example. Notice hte text doesn’t flop due to the image source. So just be mindful of cosmetics.
The background stacking is like z-index. Transforming the elements 180deg doesn’t change hte face that one element has a “z-index:1” and the other has a “z-index:2” 
.