Creating a 3d box effect, face keeps appearing over the other - css

Question

How can I achieve the desired effect? I want to create a kind of box that flips around in 3d in the x axis and reveals the other face, all while conserving the same dimensions. Currently the effect is almost working but for some reason one face is always visible. Why does that happen and how to change that?
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

Answer 1

Just add this css properties,
#div2 { z-index: 1;}
#div1:hover #div2 { z-index: 0;}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
z-index: 1;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
z-index: 0;
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

Answer 2

Add backface-visibility:hidden;
div {
backface-visibility: hidden;
}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>