backface

by anton4ept

HTML

<input type="checkbox" id="flip">
<label class="backfaces" for="flip">
<div class="front"> frontface </div>
<div class="back"> backface </div>
</label>

CSS

.backfaces {
    width: 120px;
    height: 120px;
    position: absolute;
    top:0;
    left:0;
    border: 1px solid red;
    overflow: hidden;
}
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    backface-visibility: hidden;
    transition: 0.5s;
    position: absolute;
}
.back {
    background-color: #f00;
}
.front {
    background-color: #00f;
}
.backfaces .back{
    transform:rotateY(180deg);
}

#flip:checked+.backfaces .front{
    transform:rotateY(180deg);
}
#flip:checked+.backfaces .back{
    transform:rotateY(360deg);
}