CSS 3D 变换只有一半可点击答案

【问题标题】：CSS 3D Transform Only Half ClickableCSS 3D 变换只有一半可点击
【发布时间】：2014-03-06 08:56:56
【问题描述】：

我正在尝试创建一个可翻转的卡片，点击即可翻转。卡片默认面朝下，并且由于某种原因，只有卡片的右半部分是可点击的。我试图让整张卡片能够点击和翻转。下面以 JSFiddle 为例。

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

【问题讨论】：

左半部分对我来说是可点击的（firefox 27.0.1）
这里也一样。我认为这似乎是一个 webkit 错误。
是的，我认为它是一个 webkit 的东西......
jsfiddle.net/aa3Lc/1o.O
看起来像一个 webkit 的东西！我以为我在 Firefox 中对其进行了测试并得到了同样的结果，但看起来你是对的。

标签： javascript jquery html css

【解决方案1】：

将.card中的-webkit-transform: perspective(1000px) rotateY(180deg);更改为

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

解决您的问题。 Demo

不是 100% 确定为什么每个人都有 perspective(1000px)... 我会将 perspective: 1000px; 放在 .card 的变换下方并删除所有其余部分

【讨论】：

我也不确定我为什么拥有它。它原本不存在，但我一直在尝试让它发挥作用，但它似乎并没有受到伤害。