CSS rotateX around center - css

Question

Alright. I've done quite a bit of research, but I wasn't able to come up with anything. After possibly over-thinking the problem, here is what I'd appreciate your help with.
I would like to be able to rotate a <div> around its center so its backside becomes visible. I was able to do that with rotateY--without any problems. But when using rotateX the <div> does not rotate around its center anymore.
The CSS:
.flip-container {
font-size: 30px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
margin: 0 auto;
color: black;
}
.flip-container:hover .flipper {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background: transparent;
}
.front {
z-index: 1;
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
.back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
This problem is driving me up the walls. I know it's something small I overlooked; but I can't find it. Any helps or hints would be greatly appreciated. :)
Fiddle

Answer 1

For a vertical rotation, you need to specify transform-origin, with :
<x> : 50%
<y> : half height of the div
Updated Fiddle
.flipper {
-webkit-transform-origin: 50% 100px;
-moz-transform-origin: 50% 100px;
-o-transform-origin: 50% 100px;
-ms-transform-origin: 50% 100px;
transform-origin: 50% 100px;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
position: relative;
}