3d transform for a parent-child divs

Why for the following HTML:

<div class="container">
    <div class="bottom">
        <div class="face"></div>
    </div>
</div>

And CSS:

.container {
    width: 300px;
    height: 300px;
    position: relative;
    transform: perspective(900px);
    transform-style: preserve-3d;
    animation: rot 8s infinite linear;
}
.bottom {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 15%;
    left: 15%;
    opacity: 1;
}
.face {
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: 0% 0%;
    transform: rotateY(60deg);
}

A blue square doesn't cover the red rectangle when it turns back (backface-visibility doesn't help)? At the same time when .bottom and .face are not in a parent-child relationship everything works as expected.

See plunker

Note: works in Chrome. In Firefox the first example doesn't work. In IE both of them.