JSFiddle - React, Tailwind, and code Playground

by stichoza

HTML

<button>Turn</button>
<ul>
    <li>111111111</li>
    <li>222222</li>
    <li><br/>333</li>
    <li><br/>4444444</li>
    <li><br/><br/>555555555555555</li>
    <li><br/><br/>6666666</li>
    <li><br/><br/><br/>77777777777</li>
    <li><br/><br/><br/>88888888888</li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    height: 200px;
    width: 605px;
    border: 1px solid lime;
    position: relative;
}
ul li {
    transition: all 1s;
    border: 1px solid red;
    display: block;
    height: inherit;
    width: 300px;
    position: absolute;
    background: rgba(20,200,50,.1);
}
ul li:nth-child(2n) {
    -webkit-transform-origin-x: 100%;
    -webkit-transform: rotateY(180deg) perspective(500);
}
ul li:nth-child(2n-1) {
    -webkit-transform-origin-x: 0%;
    right: 0px;    
}

JavaScript

var isFirst = true;
var count = $("ul li").length;
log("Count: "+count);
$("ul li").each(function (index) {
    $(this).css("z-index", 20+count-index);
});

$('button').click(function() {
    console.log("turn");
    $("ul li:not(.turned):first").animate({
        '-webkit-transform': "rotateY(0deg)",
        'right': 'none',
        'left': "0px"
    }).addClass("turned");
    isFirst = false;
});



//
function log(l){console.log(l);}