CODEWITHSUNDEEP
htmlcsscheckboxinputcss-transitions
Dominic Neo
Dominic Neo

Reputation: 55

Checkbox only affects one element?

I'm trying to make this card flip upon toggling the checkbox, but so far I've only been able to make the front face do so. I think the checkbox input only affects the element immediately after it? How can I go around this?

http://jsfiddle.net/ineomod/2sBWQ/1/

HTML:

<ul>
<li>
    <input type="checkbox">flip</input>
    <figure class="front">
        1
    </figure>
    <figure class="back">
        2
    </figure>
</li>

CSS:

input[type=checkbox] {
   position: relative;
   top: 10px;
   left: 10px;
}

input[type=checkbox]:checked + .front {
    -webkit-transform: rotateY(180deg);
    transform:rotateY(180deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;    
}

input[type=checkbox]:checked + .back {
    -webkit-transform: rotateY(0deg);
    transform:rotateY(0deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
#diamonds {
    -webkit-perspective: 1000px;
    perspective:1000px;
    position:relative;
}
li {
    position:relative;
    margin:auto 0;
    width:33%;
    height:0;
    padding-bottom:33%;
    list-style:none;
    display:inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform:rotateZ(-45deg);
    transform:rotateZ(-45deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    background:red;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
.back {
    background:green;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

Upvotes: 2

Views: 230

Answers (2)

Paulie_D
Paulie_D

Reputation: 115109

You had the selector slightly wrong because .back does not follow immediately after the checkbox

input[type=checkbox]:checked ~ .back

will work

JSFiddle Demo

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68596

You could use:

input[type=checkbox]:checked + figure + .back

As currently you're using +, which only targets the next direct sibling. This selector will skip over the next immediate sibling (which happens to be figure.front) and target figure.back.

jsFiddle here.

Upvotes: 3

Related Questions