Check below snippet (in Chrome, it is working in Firefox) and see that after rotation result should be green, but is actually blue.

.wrapper {
display: block;
position: absolute;
top: 0; left: 0;
width: 200px;
height: 200px;
backface-visibility: visible; /* this is needed */
animation:rotate 2s ease 0s 1 normal both running;
}
.green {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: green;
backface-visibility: visible;
transform: rotateX(180deg);
}
.blue{
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: blue;
backface-visibility: hidden;
transform: rotateX(0deg);
}
@keyframes rotate{
from{transform:rotateX(0deg)}
to{transform:rotateX(-180deg)}
}

<div class="wrapper">
<div class="green"></div>
<div class="blue"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How to fix this? I tried using z-index but cannot manipulate z-index of child nodes inside wrapper's animation (which is what is controllable). Else staticaly setting z-index is of no use.

The above is part of a CSS transition lib of mine and the transition is to start with original image , rotate and then show final image (like flipping a card which has one image on one side and second image on other side). But in chrome it fails, however I set this up to either show original image or show final image.

CodePudding user response：

Use transform-style: preserve-3d; to the class = wrapper

.wrapper {
display: block;
position: absolute;
top: 0; left: 0;
width: 200px;
height: 200px;
backface-visibility: visible; /* this is needed */
animation:rotate 2s ease 0s 1 normal both running;
transform-style: preserve-3d;
}
.green {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: green;
backface-visibility: visible;
transform: rotateX(180deg);
}
.blue{
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: blue;
backface-visibility: hidden;
transform: rotateX(0deg);
}
@keyframes rotate{
from{transform:rotateX(0deg)}
to{transform:rotateX(-180deg)}
}

<div class="wrapper">
<div class="green"></div>
<div class="blue"></div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>