How can I rotate different cards using CSS?
What I am trying to do is have a lot of cards displayed on the screen.
When you click them, they should rotate and change their color. The
problem I have is that no matter which card I click, only the first one
changes, instead of the one being clicked.
Here is a fiddle:
http://jsfiddle.net/GZ8zr/2/
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);
}
thanks
No comments:
Post a Comment