Multiple backgrounds and transform

[ralphm]

@PaulOB

transformed elements create a new stacking context

@PaulOB Would that apply to background images as well, or is that a different issue? @alexmwalker has been experimenting with strange background effects on transformed elements:

[RyanReese]

@ralphm

Would that apply to background images as well, or is that a different issue

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

@alexmwalker

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” .

[PaulOB]

@ralphm

has been experimenting with strange background effects on transformed elements:

Yes I saw that post and came to the same conclusion as Ryan that you would have to swap the backgrounds around on hover.

I used keyframes to get the card swap effect Alex mentioned.

http://www.pmob.co.uk/temp2/card-flip.html

Only working in Chrome at the moment as Firefox and IE won’t transition those background properties properly.

[ralphm]

@PaulOB

I used keyframes to get the card swap effect Alex mentioned.

Nice work, Paul. But omg, did I just see you using Sass?

[PaulOB]

@ralphm

did I just see you using Sass?

lol - I just forked Alex’s original which was done in Sass.

[alexmwalker]

Hey guys, saw this on my phone over the weekend, but finally got a keyboard in front of me. The lego demo was just the clearest way I could find to explain the issue. The real use case was wanting a flat backing color behind the faces when you’re modelling simple 3D objects (i.e. the books)

And knowing the box model diagrams that have been around for year, it’s easy to see why you might expect that a background color might run behind any images.

But, yeah, seems like it basically gets treated like a flattened image in Photoshop.