JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div id="container">
    <span><label>Arne <input type="checkbox" value="Arne"/></label></span>
    <span><label>Bent <input type="checkbox" value="Bent"/></label></span>
    <span><label>Carl <input type="checkbox" value="Carl"/></label></span>
    <span><label>Dennis <input type="checkbox" value="Dennis"/></label></span>
    <span><label>Erik <input type="checkbox" value="Erik"/></label></span>
    <span><label>Frede <input type="checkbox" value="Frede"/></label></span>
    <span><label>Gert <input type="checkbox" value="Gert"/></label></span>
    <span><label>Hans <input type="checkbox" value="Hans"/></label></span>
    <span><label>Ivan <input type="checkbox" value="Ivan"/></label></span>
    <span><label>Jens <input type="checkbox" value="Jens"/></label></span>    
</div>

CSS

div {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 300px;
    background-color: #eee;
}
div:after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}
.complete span {
    background-color: grey;
    cursor: normal;
}
span {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    
    width: 10%;
    padding-bottom: 10%;
    background-color: #CEC;
    -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
    -o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease;
    /*
    -webkit-transform-origin: 200% 200%;
    -o-transform-origin: 200% 200%;
    transform-origin: 200% 200%;
    */
}
span label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer; 
}
label input {
    _display: none;
}
span:nth-child(1) {
    -webkit-transform: translateX(450%) translateY(300%) rotateY(81deg) translateZ(-320px);
    -o-transform: translateX(450%) translateY(300%) rotateY(81deg) translateZ(-320px);
    transform: translateX(450%) translateY(300%) rotateY(81deg) translateZ(-320px);
}
span:nth-child(2) {
    -webkit-transform: translateX(450%) translateY(300%) rotateY(63deg) translateZ(-320px);
    -o-transform: translateX(450%) translateY(300%) rotateY(63deg) translateZ(-320px);
    transform: translateX(450%) translateY(300%) rotateY(63deg) translateZ(-320px);
}
span:nth-child(3) {
    -webkit-transform: translateX(450%) translateY(300%) rotateY(45deg) translateZ(-320px);
    -o-transform: translateX(450%) translateY(300%) rotateY(45deg) translateZ(-320px);
    transform: translateX(450%) translateY(300%) rotateY(45deg) translateZ(-320px);
}
span:nth-child(4) {
    -webkit-transform: translateX(450%) translateY(300%) rotateY(27deg) translateZ(-320px);
   ...

JavaScript

var checkboxes = document.querySelectorAll("input[type=checkbox]");
var labels = document.querySelectorAll("label");
(function () {
    
    var i = 0;
    var l = checkboxes.length;
    var selected = [];
    var max = 3;
    var container = document.getElementById("container");
    var eventName = ("ontouchstart" in window) ? "ontouchstart" : "onmousedown";
    while (i < l) {
        labels[i][eventName] = click;
        //labels[i].ontouchstart = click;
        //checkboxes[i].onclick = change;
        i++;
    }
    
    function click (e) {
        var target = e.target;
        var index = indexOf(labels, target);
        if (index < 0) {
            return;
        }
        var checkbox = checkboxes[index];
        if (selected.length < max && selected.indexOf(target) < 0) {
            if (!checkbox.checked) {
                target.parentNode.className = "selected";
                selected.push(target);
                window.console && console.log("added to selected");
            }
            else {
                window.console && console.log("preventDefault");
                e.preventDefault();
            }
        }
        else {
            var selIndex = selected.indexOf(target);
            if (selIndex > -1) {
                selected.splice(selIndex, 1);
                window.console && console.log("removed from selected");
            }
            target.parentNode.className = "";
        }
        if (selected.length < max) {
            container.className = "";
        }
        else {
            container.className = "complete";
        }
    }
       
    function indexOf (array, value) {
        var i = 0;
        var l = array.length;
        while (i < l) {
            if (array[i] === value) {
                return i;
            }
            i++;
        }
        return -1;
    }
    
} ());