CSS3 - Rotation by fixed side

Question

See a fiddle to demonstrate my issue:

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

http://jsfiddle.net/Lbq3K/

I would like to flip a div with the bottom line completely fixed throughout the movement. I've been googling around a lot, but couldn't find a solution. As you can see in the fiddle, when you hover your mouse over the div, the bottom line of the border moves away from the <hr> line at the bottom, and gets rotated back afterwards. I would like to have the rotation with a completely fixed bottom border, like I'd flip a calendar page. I've tried transform-origin to fix the rotation, but it apparently isn't working. Is there a way to do this just CSS?

Answer 1

if you put your transform origin on your DIV properties instead of in your DIV:hover it works.
In code:

use this:

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;

}

instead of this:

div:hover{
    -webkit-transform:  rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
div {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

Answer 2

Have you ever heard about perspective-origin ? I'm not sure about it, but I think

div {
    ...
    perspective-origin:100% 100%;
}

should work fine for you. My testing was successful. perspective-origin defines the point from which the viewer is looking at the element.