CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MattDiamant
MattDiamant

Reputation: 8781

CSS 3D Transform Only Half Clickable

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

Upvotes: 2

Views: 455

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25994

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

Upvotes: 5

Related Questions