我正在尝试创建一个可翻转的卡片,可以点击。该卡默认面朝下,由于某种原因,只有卡的右半部分是可点击的。我试图让整张卡能够点击和翻转。例如下面的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;
}
答案 0 :(得分:5)
将-webkit-transform: perspective(1000px) rotateY(180deg);
中的.card
更改为
-webkit-transform: perspective(1000px) rotateY(180deg) translateZ(-1px);
解决您的问题。 Demo
不是100%确定为什么每个人都有perspective(1000px)
...我会将perspective: 1000px;
放在.card
的转换下方并删除所有其余的