JSFiddle - React, Tailwind, and code Playground

by Piley

HTML

<meta charset="utf8">
<title>CSS cube</title>
<link rel="stylesheet" href="style.css">
<div id="wrapper">
    <div id="cube">
        <div class="side" id="side1">ДНИЩЕ</div>
        <div class="side" id="side2">КРАБ</div>
        <div class="side" id="side3">РАК</div>
        <div class="side" id="side4">ОВОЩ</div>
        <div class="side" id="side5">ПОЛЯК</div>
        <div class="side" id="side6">ЛОХ</div>
    </div>
</div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            $(document).mousemove(function(e){
                $('#cube').css({
                    '-webkit-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
                });
            });
        });
    </script>


</script>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/light_noise_diagonal.png);
    font: 1em "PT Sans", Tahoma, Arial;
}

#wrapper {
    -webkit-perspective: 900px;
    margin: 80px;
}


#cube {
    position: relative;
    width: 300px;
    height: 300px;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform-style: preserve-3d;
}

.side {
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,.3);
    background: -webkit-radial-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
    position: absolute;
    border: 15px solid #fff;
    border-radius: 15px;
    font-size: 5em;
    color: #fff;
    line-height: 300px;
    text-align: center;
    text-shadow: 0 px 3px rgba(0,0,0,.4);
    box-shadow: 0 0 6px rgba(0,0,0,.5);
    -webkit-transform-origin: 50% 50% -150px;
    
}

#side2 {
    -webkit-transform: rotateY(90deg);
}
#side3 {
    -webkit-transform: rotateY(-90deg);
}
#side4 {
    -webkit-transform: rotateX(90deg);
}
#side5 {
    -webkit-transform: rotateX(-90deg);
}
#side6 {
    -webkit-transform: rotateY(180deg);
}