HTML Block Anchor element only half clickable in Chrome


I ran into a strange CSS problem in Chrome. I made a pen as example:

.flip {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 90px;
    height: 94px;
    border: 4px solid white;
.flip .card {
    width: 100%;
    height: 100%;
    line-height: 86px;
    text-align: center;
    -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: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;

    .flip .card .face {
        width: 100%;
        height: 100%;
        z-index: 2;
        font-size: 1.5em;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;

    .flip .card .back a {
        display: block;
        color: white;

I made a few div's with inside hyperlinks. I've set the displaymode to Block, so the link should stretch to the whole area.

It doesn't. It only stretches the bottom half of the div. In Firefox it works fine. Only Chrome seems to have this problem. Couldn't find any bug that supports my problems...

Problem courtesy of: Milkmannetje


Chrome you say? That's easy, if it doesn't go one way, try it the other way. Try changing

.flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
    -moz-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);


.flip .card.flipped {
    -webkit-transform: rotatex(180deg);
    -moz-transform: rotatex(180deg);
    -ms-transform: rotatex(180deg);
    -o-transform: rotatex(180deg);
    transform: rotatex(180deg);
Solution courtesy of: Xeevis


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.