JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="wrapper">
<div id="box">
<ul>
    <li class="active">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</div>
</div>
<input style="margin-top:50px;" type="button" value="click">

CSS

#wrapper{
    padding:120px 0 0 120px;
}

#box {
    -webkit-transform-origin:50% 50%;
    //-webkit-transition:100ms linear;
    -webkit-transform-style:preserve-3d;
}
ul{
    -webkit-perspective:800;
    height:100px;
    position:relative;
    width:100px;
    -webkit-transform-origin:50% 50%;
    -webkit-transform-style:preserve-3d;
}

li{
    line-height:100px;
    height:100px;
    font-size:30px;
    text-align:center;
    position:absolute;
    width:100%;
    -webkit-transform-origin:50% 50%;
    z-index:1;
    -webkit-transition:1s linear;
    //opacity:0;
}

li:nth-child(2){
    z-index:2;
}

.active{
    opacity:1;
}

JavaScript

var angles = 0;
var open = false;
var velocity = 20;
var angle;
var baseAngle = 100;
$('input').click(function() {
    /*angles += angle;
    $('#box').css('-webkit-transform', 'rotateX(' + angles + 'deg) ');
    if ($('li.active').next('li').length) {
        $('li.active').next('li').addClass('active').prev().removeClass('active');
    }
    else {
        $('li.active').removeClass('active');
        $('li').first().addClass('active');
    }*/
    open = true;
})
    var rotationY= 0;
    var rotationX = 0;
    $('#wrapper').mousemove(function(e){
        rotationY = -15 + (30 * e.pageX / $('#wrapper').width());
        rotationX = -30 + (60 * e.pageY / $('#wrapper').width());
    })

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animloop() {
    requestAnimFrame(animloop);
    update();
};

function update() {
    if (open) {
        //angles += velocity;
        $('#box').css('-webkit-transform', 'rotateY('+rotationY+'deg) rotateX(' + rotationX + 'deg) ');
        velocity -= 0.5;
        if(velocity<0.1){
           velocity = 0; 
            var remainder = Math.ceil(angles/360);
            
            var up = remainder*360;
            //$('#box').css('-webkit-transition', '1.5s ease-in');
            $('#box').css('-webkit-transform', 'rotateY('+rotationY+'deg) rotateX('+rotationX+'deg) ');                  
        }
    }

}

function transformCircle(eleArray) {
    var sides = eleArray.length;
    angle = 360 / sides;
    var width = baseAngle * 2 * minMax(Math.tan(degToRad(angle / 2)));
    $('#box').width(width);
    $('#box,#wrapper').height(width);
    eleArray.each(function(i) {
        $(this).width(width);
        $(this).height(width);
        $(this).css('line-height',...