How to create a flip card in css with checkbox?-CodePudding

I would like to create a flip card using checkbox. So I created container with checkbox, and there where I want to create two forms:

<div >
    <input className="checkbox" type="checkbox" id="reg-log" name="reg-log" />
    <div >
        <div >
            <div >
                flip card front
            </div>
            <div >
                flip card back
            </div>
        </div>
    </div>
</div>

I want to make checkbox that if will be checked then form will change to flip-card-back, and when unchecked it will back to flip-card-front. So I added some CSS:

.flip-card {
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.checkbox:checked ~ .flip-card .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: sandybrown;
    color: black;
}

.flip-card-back {
    background-color: sandybrown;
    color: white;
    transform: rotateY(180deg);
}

But the line with checked doesn't work. How to achieve that with checkbox? Any help will be appreciated. Thank you very much!

CodePudding user response：

You have a typo in your HTML just change the className property to class.