CSS: 2 sided 3D flip overlapping / bleeding - html

Question

I am trying to implement a 3D flip effect using two faces in IE (no preserve-3d). See this CodePen for an example: http://codepen.io/djskinner/pen/XbdPpj
The problem is that the two faces overlap at the edges. The issue is present in both Chrome and IE so I assume that there is a problem in the way I have converted this effect to take account for the lack of preserve-3d in IE. Is there a way to prevent this from occurring?

Answer 1

I have achieved the effect without any glitches by utilising the transform-origin property, which then allowed a simple rotation rather than having to perform rotations and translations.
Updated code pen can be found here: http://codepen.io/djskinner/pen/NqNVPx.
Inspiration taken from this code pen: http://codepen.io/jonathan/pen/xiJLn.

Answer 2

Here is an update of your codepen your origin's where updated and I have also added a z-index to your active state so that on hover you cant see the hidden div at the bottom of your 3d box.
hope it helps.
http://codepen.io/anon/pen/pJymRP
$('.cube').hover(function(event) {
$(this).addClass('active');
event.preventDefault();
}, function(event) {
$(this).removeClass('active');
event.preventDefault();
});
$cube-height: 100px;
$negative-half-cube-height: -0.5*$cube-height;
.cube {
border: 1px solid #000;
height: $cube-height;
margin: 0 auto;
position: relative;
width: 60%;
perspective: 1000px;
}
// The two faces of the cube
.default-state,
.active-state {
backface-visibility: visible;
height: $cube-height;
position: absolute;
left: 0;
top: 0;
transition: transform 1.5s ease;
transform-origin: center center $negative-half-cube-height;
-webkit-transform-origin: center center $negative-half-cube-height;
width: 100%;
}
// Position the faces
.default-state {
background-color: #1d92c9;
transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.active-state {
transform:perspective(1000px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
.active {
.default-state {
transform:perspective(1000px) rotateX(-90deg) rotateY(0) rotateZ(0deg);
}
.active-state {
z-index:99999;
transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}
}
/* Demo styling */
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
margin: 70px;
background: #f1f1f1;
}
h1 {
font-size: 20px;
text-align: center;
margin-top: 40px;
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state, .active-state {
background: #2ecc71;
font-size: 16px;
text-transform: uppercase;
color: #fff;
line-height: $cube-height;
}
.active-state {
background: darken(#2ecc71, 7%);
}
#flipto {
display: block;
text-align: center;
text-decoration: none;
margin-top: 20px;
color: #ccc;
}
<h1>3D FLIP IN IE</h1>
<div class="cube">
<div class="active-state">
<span>...and I flip</span>
</div>
<div class="default-state">
<span>Hover</span>
</div>
</div>