JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div id="cube">
    <div id="top"   ></div>
    <div id="bottom"></div>
    <div id="front" ></div>
    <div id="back"  ></div>
    <div id="left"  ></div>
    <div id="right" ></div>
</div>

CSS

body
{
    overflow: hidden;
}
#cube
{
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

    width:  600px;
    height: 600px;

    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -300px;
    margin-top:  -300px;
}

#cube div
{
    width:  200px;
    height: 200px;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -100px;
    margin-top:  -100px;
    
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
    
    -webkit-transition: all 500ms;
       -moz-transition: all 500ms;
        -ms-transition: all 500ms;
         -o-transition: all 500ms;
            transition: all 500ms;
}


#top
{
    background-color: red;
}
#bottom
{
    background-color: green;
}
#front
{
    background-color: blue;
}
#back
{
    background-color: yellow;
}
#left
{
    background-color: orange;
}
#right
{
    background-color: pink;
}


#top
{
    -webkit-transform: rotateX( 90deg) translateZ(100px);
       -moz-transform: rotateX( 90deg) translateZ(100px);
        -ms-transform: rotateX( 90deg) translateZ(100px);
         -o-transform: rotateX( 90deg) translateZ(100px);
            transform: rotateX( 90deg) translateZ(100px);
}
#bottom
{
    -webkit-transform: rotateX(-90deg) translateZ(100px);
       -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
         -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
}
#front
{
    -webkit-transform: rotateX(  0deg) translateZ(100px);
       -moz-transform: rotateX(  0deg) translateZ(100px);
        -ms-transform: rotateX(  0deg) translateZ(100px);
        ...

JavaScript

var prefix = function(element, propriete, valeur){
    
    var pre = ['-webkit-',
               '-moz-',
               '-ms-',
               '-o-',
               ''];
                    
    for(var i = 0 ; i < pre.length ; i++){
        element.css(pre[i] + propriete, valeur);    
    }
};

var animate = function(selector){
    
    hScreen   = jQuery(window).height();
    wScreen   = jQuery(window).width();
    
    var angleMax = 120;
        
    var a = (angleMax *  2) / hScreen,
        b = (angleMax *  2) / wScreen,
        c = (angleMax * -1);
    
    var f = function(x, a, b){
        return (a * x) + b;
    };
    
    jQuery(document).on('mousemove', function(event){
    
        var x = event.pageX,
            y = event.pageY;
            
        prefix(jQuery(selector),
               'transform',
               'rotateX('+ -f(y, a, c) +'deg)' + ' ' +
               'rotateY('+ +f(x, b, c) +'deg)');
    });
};

animate('#cube');