JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sphere" class="normal">
    <div class="rotator">
        <div class="container"></div>
    </div>
</div>

CSS

body{
	background-color:#000FFF;
	position:relative;
	size:relative;
	height:100%;	
}

#sphere {
    width: 170px;
    height: 100px;
    margin:700px auto;
    -webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    perspective: 10000px;
position:relative;
	}

.container {
    width: 100px;
    height: 100px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform: preserve-3d;
    -moz-transition: -moz-transform 2s linear;
    -moz-transform-style: preserve-3d;
    transition: transform 2s linear; /*speed with which sphere move currently 2s */
    transform-style: preserve-3d;
}

.container > ul {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
    position: absolute;
}

.container li {
    width: 98px;
    height: 98px;
    position: absolute;
    display: block;
    background: white-space;
    border: 1px solid white;
    opacity: 0.5;
    border-radius: 100px;
}

JavaScript

$(function(){
    var el = document.createElement('div'),
        transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        transformProp = support(transformProps);

    function support(props) {
        for(var i = 0, l = props.length; i < l; i++) {
            if(typeof el.style[props[i]] !== "undefined") {
                return props[i];
            }
        }
    }

    var $sphere = $('#sphere'),
        sphere = {
            rounds: 10,
            panels: 25,
            panelWidth: 200,
            el: $sphere.find('.container'),
            build: function(p, r) {

                var panels = p || this.panels,
                    rounds = r || this.rounds,
                    rotationPerPanel = 360/panels,
                    rotationPerRound = 360/2/rounds,
                    yRotation,
                    xRotation,
                    width = this.panelWidth,
                    zTranslate = (width/2) / Math.tan(rotationPerPanel * Math.PI/180),
                    $container = this.el,
                    $ul,
                    $li,
                    i, j;

                this.el.html('');
                for(i = 0; i < rounds; i++) {
                    $ul = $('<ul>');
                    xRotation = rotationPerRound * i;
                    $ul[0].style[transformProp] = "rotateX("+ xRotation + "deg)";
                    for(j = 0; j < panels; j++) {
                        $li = $('<li>');
                        yRotation = rotationPerPanel * j;
                        $li[0].style[transformProp] = "rotateY("+ yRotation +"deg) translateZ("+ zTranslate +"px)";
                        $ul.append($li);
                    }
                    $container.append($ul);
                }
            }
        },
        mouse = {  start : {}   },
        touch = document.ontouchmove !== undefined,
        viewport = {
            x: 0,
            y: 0,
            el: $('#sphere .container')[0],
   ...