Q:

CSS rotateX around center

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

A:

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;
}

