Element rotated 180 degrees ends up behind other elements - css

Question

I noticed an unusual behavior when transform-style: preserve-3d is set and an element is rotated 180 degrees. It seems this causes the rotated element to go behind others, as if it has z-index set to a lower value.
Here's a sample:
.parent {
transform-style: preserve-3d;
position: relative;
}
.card {
position: absolute;
width: 100px;
height: 100px;
}
.card.red {
background-color: red;
}
.card.blue {
background-color: blue;
}
.rotated {
transform: rotateY(180deg);
}
<div class="parent">
<div class="card red"></div>
<div class="card blue rotated"></div>
</div>
When using Chrome, the (rotated) blue card is on top in HTML, but the red card is visible instead. Giving a z-index to the blue card also seems to have no effect.
I couldn't find it documented anywhere - is this a glitch or expected behavior? Is there a way to ensure the blue card is shown instead (while keeping transform-style: preserve-3d)?
Edit: it seems this behavior is not present in Firefox. However, it's unclear if this is an issue with Chrome or Firefox.

Answer 1

transform-style:preserve-3d means "the children of the element should be positioned in the (same) 3D-space". Which means if you apply 3d transformations to them they will be rendered accordingly.
Now, both your elements are at the same exact z-index value. Which is, by default, auto, which corresponds to 0.
But if you rotate the element by 180deg on Y or X axis, it will basically flip. Which means it will be at the other end of the same z-index value (because you set transform-style:preserve-3d). Which means it will be at the opposite end of the stack (from it's normal position - which is on top of its preceding siblings).
So you either give it specifically a bigger z-index or you switch their positions.
To understand more of this behavior play with the rotateY. You will notice at other values only half the element is visible, and that's the half that's closer to you, considering the rotation angle in 3d space.
At 90 and 270 degrees it will be invisible as it is perpendicular (and has no width) and at 180 it is "completely" rotated in 3d space, which means it's behind the other element that's at the same z-index value and (technically) "behind" it.
Another "fix" is to remove preserve-3d from the parent, (or move it to the child, as I.Johnson suggested), so the 2 elements are rendered each in its own space, and each representation of that space would be stacked according to their respective elements position in the stacking context.

Answer 2

When using the transform-style property it must be used together with the transform property.
Adding the transform-style: preserve-3d; property to the .rotated class displays the blue card
.rotated {
transform: rotateY(180deg);
transform-style: preserve-3d;
}
Example:
https://codepen.io/IanJohnson/pen/jXGVVo?editors=1100

Answer 3

because both cards has the same z-index
if you change your HTML to:
<div class="parent">
<div class="card red"></div>
</div>
<div class="parent">
<div class="card blue rotated"></div>
</div>
it will render the blue one

Answer 4

I think this is because the back of a DIV isn't necessarily the same color as the front. So rotating on the Y axis you're seeing the back/invisible/transparent side of the DIV. If you rotate on the Z axis you have the same face of the DIV visible.
Update: #fstanis pointed out that my transparent backing was incorrect. So if the Z vs. Y axis does still work as expected, then I don't actually 100% know why :)
.parent {
transform-style: preserve-3d;
position: relative;
}
.card {
position: absolute;
width: 100px;
height: 100px;
}
.card.red {
background-color: red;
}
.card.blue {
background-color: blue;
}
.rotated {
transform: rotateZ(175deg);
}
<div class="parent">
<div class="card red"></div>
<div class="card blue rotated"></div>
</div>