我想要做的是在屏幕上显示很多卡片。当您单击它们时，它们应该旋转并改变颜色。 我遇到的问题是，无论我点击哪张卡片，只有第一张发生变化，而不是被点击的那一张。
这是一个 fiddle :
html:
<body>
<div class="pane">
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
</div>
</body>
CSS:
input
{
width:100px;
height:100px;
display:none
}
.card
{
width:100px;
height:100px;
background:red;
display:block;
transition: background 1s, -webkit-transform 1s;
}
input:checked +.card
{
background:blue;
-webkit-transform: rotateX(180deg);
}
谢谢
最佳答案
您的问题是您在三个输入和标签上使用了相同的 ID。根据 W3C 规范，ID 在页面上必须是唯一的。这就是 for 属性所期望的。因此，将您的代码更改为如下所示:
http://jsfiddle.net/GYatesIII/GZ8zr/4/
关于css - 如何使用 CSS 旋转不同的卡片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18258423/