JSFiddle - React, Tailwind, and code Playground

by paka

HTML

<style>
    
    </style>
    
</head>
    <body>
    
    <div id="viewport" >
        <div id="world" ></div>
    </div>

CSS

*{ 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0 
    }
    body {
        color: #eee;
        text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
        line-height: 16px;
        overflow: hidden;
    }
    #viewport {
        -webkit-perspective: 400; 
        -moz-perspective: 400; 
        -o-perspective: 400; 
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
        background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.28, rgb(69,132,180)),
            color-stop(0.64, rgb(31,71,120))
        );
    }

    #world {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -256px;
        margin-top: -256px;
        height: 512px;
        width: 512px;
        background-color: rgba( 255, 0, 0, .2 );
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
    }

JavaScript

var world = document.getElementById( 'world' ),
        viewport = document.getElementById( 'viewport' ),
        
        d = 0,
        worldXAngle = 0,
        worldYAngle = 0;
    
    window.addEventListener( 'mousewheel', onContainerMouseWheel );
    window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel ); 

    window.addEventListener( 'mousemove', function( e ) {
        worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180;
        worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180;
        updateView();
    } );
    
    function updateView() {
        var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
        world.style.webkitTransform = t;
        world.style.MozTransform = t;
        world.style.oTransform = t;
    }
    
    function onContainerMouseWheel( event ) {
            
        event = event ? event : window.event;
        d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 );
        updateView();
        
    }