JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<input class='t' id='a' type="number" value="0" step="100" />
<input class='t' id='b' type="number" value="0" step="1" />
<input class='t' id='c' type="number" value="0" step="0.1" />
<input class='t' id='x' type="number" value="0" step="1" />
<input class='t' id='y' type="number" value="0" step="1" />
<input class='t' id='z' type="number" value="0" step="1" />



<ul id="flipboard">
    <li>
        0
    </li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>   
</ul>

<br />
<input type="button" id="animate_start" value="start animation" />

CSS

#flipboard li{
    text-align: center;
    display: inline-block;
    font-size: 45px;
    width: 50px;
    height: 70px;
    position: relative;
    vertical-align: middle;
}

.t{
    width: 40px;
}

#flipboard li #flipper{
    top: 0px;
   position: absolute;
    width: 100%;
    height: 50%;
    background-color: gray;
    -webkit-transform-origin : center bottom;
}

JavaScript

(function ( $ ) {
 
 
    
}( jQuery ));



$(".t").change(function(){
     v = [];
    $(".t").each(function(){
        var el_val = $(this).val();
        var el_id = $(this).attr('id');
       // console.log(el_id + " = " + el_val);
       v[el_id] = el_val;
    });
    
    $("#flipper").css({'-webkit-transform':'perspective('+v['a']+'px) rotateX('+v['b']+'deg)'});
});

// Set click
$("#animate_start").click(function(){
    
    // Create flipper element
    var el = $("<div>0</div>").css({
            "top"       :  "0px",
             "position" : "absolute",
             "width"    : "100%",
             "height"   : "50%",
     "background-color" : "gray",
    "-webkit-transform-origin" : "center bottom",
    "-webkit-transform" : "perspective(800px) rotateX(0deg)"
    });
    
    //set flipper
   
    $("#flipboard li:first-of-type").append(el);
    
    $({deg: 0}).animate({deg: -90}, {
        step: function(now, fx){
             el.css({
                 transform: "rotateX(" + now + "deg)"
            });
        }
    }, function(){
        el.remove();
    });

    
    function
    
    
});