如何使用 CSS 旋转不同的卡片？答案

【问题标题】：How can I rotate different cards using CSS?如何使用 CSS 旋转不同的卡片？
【发布时间】：2013-08-16 01:53:23
【问题描述】：

我想做的是在屏幕上显示很多卡片。当您单击它们时，它们应该旋转并改变它们的颜色。我遇到的问题是，无论我点击哪张卡片，只有第一张卡片发生变化，而不是被点击的卡片。

这是一个小提琴：

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

谢谢

【问题讨论】：

CSS: Select the first adjacent sibling的可能重复
CSS 中没有“第一个兄弟”选择器。您需要使用 JavaScript。

标签： css

【解决方案1】：

您的问题是您在三个输入和标签上使用相同的 ID。根据 W3C 规范，ID 在页面上必须是唯一的。这就是for 属性所期望的。因此，将您的代码更改为如下所示： http://jsfiddle.net/GYatesIII/GZ8zr/4/

【讨论】：

【解决方案2】：

你有 3 次相同的 id “按钮”。因此 - 至少在我的浏览器和你的浏览器上 - 每个标签都是 for 第一个复选框。 AFAIK 这种行为也是未定义的，因为标准要求任何给定页面的唯一 ID（见下文）。

This fork of your fiddle 删除了复选框的display:none 表明单击任何标签都会导致 first 复选框被切换。

另一方面，This fiddle 演示了您的代码在 id 唯一时可以正常工作。

还要注意the HTML standard specifies that ids must be unique:

id = 名称 [CS] ：此属性为元素分配名称。此名称在文档中必须是唯一的。

【讨论】：

【解决方案3】：

问题在于您的输入和标签都只针对第一个输入标签 - 这是不正确的。这是一个工作演示：http://jsfiddle.net/GZ8zr/6/

如果您的输入具有 id “按钮”，则其他输入不能具有该 id。即使你这样做了，第一个输入复选框也会被选中 - html 本身强制每个 html 页面只有一个唯一 ID。

HTML：

<div class="pane">
<input type="checkbox" id="button1">
<label class="card" for="button1"></label>

<input type="checkbox" id="button2">
<label class="card" for="button2"></label>

<input type="checkbox" id="button3">
<label class="card" for="button3"></label>

<input type="checkbox" id="button4">
<label class="card" for="button4"></label>
</div>
    </body>

【讨论】：

您需要将第一个复选框上的 ID 更改为 button1
感谢您的提示..一定错过了。迅速改变。再次感谢！

【解决方案4】：

所有卡片都必须具有唯一标识符。您正在单击一张卡片，CSS 正在应用该类的第一件事上运行（在本例中为第一张卡片）。我会使用 jquery 来选择你希望类应用到的特定卡-> $(this)。希望对您有所帮助。

【讨论】：

嘿，我不建议将 JavaScript 或 jQuery 添加到绝对不需要它的项目中。