CSS 3D Transform Only Half Clickable

Question

I'm trying to create a flippable card that flips on click. The card is default face down, and for some reason, only the right half of the card is clickable. I'm trying to make the whole card able to click and flip. JSFiddle below for example.

http://jsfiddle.net/aa3Lc/

.card {
    background: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 2em;
    border: 2px solid #000;
    height: 50px;
    margin: 5px 0 ;
    text-align: center;
    width: 38px;

    border-radius: 3px;
    -webkit-transform: perspective(1000px) rotateY(180deg);
    -moz-transform: perspective(1000px) rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transition: all 0.2s linear;
}
.card.active {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    -moz-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg);
}
.card .card-front {
    display: block;
    width: 38px;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.card .card-back {
    cursor: pointer;
    display: block;
    width: 38px;
    height: 100%;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

Answer 1

Change -webkit-transform: perspective(1000px) rotateY(180deg); in .card to

-webkit-transform: perspective(1000px) rotateY(180deg) translateZ(-1px);

to fix your issue. Demo

Not 100% sure why you have perspective(1000px) for each one as well... I'd put perspective: 1000px; below the transform on .card and remove all the rest