我正在尝试创建一张单击时翻转的可翻转卡。该卡默认面朝下,由于某种原因,卡的右半可单击。我正在尝试使整个卡都可以点击和翻转。例如,下面的jsfiddle。
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;
}
.card
中的-webkit-transform: perspective(1000px) rotateY(180deg);
更改为
-webkit-transform: perspective(1000px) rotateY(180deg) translateZ(-1px);
解决您的问题。 demo
不是100%确定为什么您也有perspective(1000px)
...我将perspective: 1000px;
放在.card
上的转换下方,然后删除所有其余的