Flipping Card Issue

Question

I am trying to create a flipping card metro style menu, however when I tried to declare the front and back styles when you are hovering your mouse on the front div it does n

Answer 1

Maybe something like this:

CSS Flip: DEMO

I added two new classes: Flipper , Flip Container.

.flip-container {
    perspective: 1000;
}
    /* flip when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

Additional Info:

I've embedded Aerotwist's | Paul Lewis's Graphical CSS FLIP including jQuery. It's really cool and you might find it more helpful:

there is a CSS code inside, which divides to two parts, first, is the "Movement" of the "Card", the second is the main style.css. I'd suggest you separate one from another.

CSS: 3D Flip: JSFIDDLE

Good Luck!