How do I debug disappearing rotated elements in CSS? - css

Question

I have a card with something on the back, and I'm y-rotating the card +/- 180 deg:
http://jsfiddle.net/s46t6cem/1/
#back {
transform: rotateY(180deg);
}
.flipped-right {
transform: rotateY(180deg);
}
.flipped-left {
transform: rotateY(-180deg);
}
In the jsfiddle basic example, both flips work fine. However, in my application, flipping right works, but when I flip left, I can see the back as it's moving (it flickers though, which is odd), but then I can't see the back when it stops moving. I can see it if I change the original #back rotation to 181 deg.
and then
I can't figure out what's different between the fiddle and my app that might be causing this. How can I further diagnose this?

Answer 1

I dont know how to debug this kind of things. But maybe you need to add some x-browser propierty:
-webkit -moz -o -ms. I have used this code in other project, try it, it worked for me (not for IE)
<style>
.flip-container {
position: relative;
height: 100%;
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
-ms-perspective: 800;
perspective: 800;
padding: 0;
}
.flip {
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.flip-container:hover .flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.side {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.flip .front {
height: 100%;
width: 100%;
}
.flip .back {
display: block;
height: 100%;
width: 100%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<div class="flip-container">
<div class="flip">
<div class="side front">
a
</div>
<div class="side back">
b
</div>
</div>
</div>

Answer 2

Thank you #mknadler, I took background: white off of the #card and it works.