JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ul id="container">
    <li><img src="//placekitten.com/420/210" /><p></p></li>
    <li><img src="//placekitten.com/440/220" /><p></p></li>
    <li><img src="//placekitten.com/460/230" /><p></p></li>
    <li><img src="//placekitten.com/480/240" /><p></p></li>
    <li><img src="//placekitten.com/500/250" /><p></p></li>
    <li><img src="//placekitten.com/520/260" /><p></p></li>
    <li><img src="//placekitten.com/540/270" /><p></p></li>
    <li><img src="//placekitten.com/560/280" /><p></p></li>
    <li><img src="//placekitten.com/580/290" /><p></p></li>
    <li><img src="//placekitten.com/600/300" /><p></p></li>    
</ul>

CSS

.container {
    margin: 0 auto;
    position: relative;
    background-color: #eee;
}
.complete li {
    opacity: 0.5;
    cursor: normal;
}
li {
    -webkit-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;
    float: left;
    width: 320px;
    padding: 0;
    position: relative;
    list-style-type: none;
    cursor: pointer;
    z-index: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
li:before {
    content: "";
    display: block;
    padding-bottom: 50%;
}
li > img,
li > p {
    /*
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    transition: transform 0.3s linear;
    */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
li > img {
    -webkit-animation: select-image 0.3s;
    background-color: #000;
    z-index: 3;
}
li > p {
    -webkit-animation: select-box 0.3s;
    background-color: black;
    z-index: 2;
}
li.selected {
    z-index: 1;
    opacity: 1;
}
.selected > img {
    -webkit-animation: deselect-image 0.3s;
    z-index: 2;
}
.selected > p {
    -webkit-animation: deselect-box 0.3s;
    z-index: 3;
}

@-webkit-keyframes select-image {
    
    0% {
        -webkit-transform: translateZ(-160px) rotateY(-90deg) translateZ(160px);
        z-index: 2;
    }

    50% {
        z-index: 3;
    }
    
    100% {
        -webkit-transform: translateZ(-160px)  rotateY(0deg) translateZ(160px);
        z-index: 3;
    }
    
}

@-webkit-keyframes deselect-box {
    
    0% {
        -webkit-transform: translateZ(-160px)  rotateY(90deg) translateZ(160px);
        z-index: 2;
    }

    50% {
        z-index: 3;
    }
    
    100% {
        -webkit-transform: translateZ(-160px) rotateY(0deg)...

JavaScript

var items = document.querySelectorAll("li");
(function () {
    
    var i = 0;
    var l = items.length;
    var selected = [];
    var max = 3;
    var container = document.getElementById("container");
    var eventName = ("ontouchstart" in window) ? "ontouchstart" : "onmousedown";
    while (i < l) {
        items[i][eventName] = click;
        i++;
    }
    
    window.console && console.log("running");
    
    function click (e) {
        var target = e.target;
        window.console && console.log("click", target.nodeName.toLowerCase());
        if (target.nodeName.toLowerCase() == "li") {
            var index = indexOf(selected, target);
            window.console && console.log("index clicked", index);
            
            if (index < 0) {
                if (selected.length < max) {
                    target.className = "selected";
                    selected.push(target);
                    window.console && console.log("added to selected", selected);
                }
            }
            else {
                selected.splice(index, 1);
                window.console && console.log("removed from selected", selected);
                target.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;
    }
  
} ());