JSFiddle - React, Tailwind, and code Playground

by mattblancarte

HTML

<head>
    <!-- Article: http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/ -->
    <!-- Demo: http://www.paulrhayes.com/experiments/cube-3d/ -->
    <!-- Originally posted: 17th July 2009 -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>3D CSS cube, use arrow keys to rotate &mdash; Paul Hayes</title>
    <meta name="author" content="Paul Hayes" />

            
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="experiment">
    <div id="wrapper">

<div id="experiment">    
    <div id="cube">
        <div id='1' class="face two">
            Page 1
        </div>
        <div id='2' class="face three">
            Page 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div id='3' class="face four">
            Page 3 - New forms of navigation are fun.
        </div>
        <div id='4' class="face five">
            Page 4 - Rotating pentagonal box
        </div>
        <div id='5' class="face seven">
            Page 5 - Rotating pentagonal box
        </div>
    </div>    
</div>
    </div>
    </body>

CSS

#experiment {
      -webkit-perspective: 2000; 
      -webkit-perspective-origin: 50% 150px;
    
      -moz-perspective: 2000; 
      -moz-perspective-origin: 50% 150px;
    }

    #cube {
      position: relative;
      margin: 100px auto 0;
      height: 400px;
      width: 400px;
      -webkit-transition: -webkit-transform .7s ease;
      -webkit-transform-style: preserve-3d;
    
      -moz-transition: -moz-transform .7s ease;
      -moz-transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
      background-color: rgba(50, 50, 50, 0.7);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }   


    #cube .two {
      -webkit-transform: translateZ(275px);
      -moz-transform: translateZ(275px);
    }

    #cube .three {
      -webkit-transform: rotateY(72deg) translateZ(275px);
      -moz-transform: rotateY(72deg) translateZ(275px);
    }

    #cube .four {
      -webkit-transform: rotateY(144deg) translateZ(275px);
      -moz-transform: rotateY(144deg) translateZ(275px);
    }

    #cube .five {
      -webkit-transform: rotateY(216deg) translateZ(275px);
      -moz-transform: rotateY(216deg) translateZ(275px);
    }

    
    #cube .seven {
      -webkit-transform: rotateY(-72deg) translateZ(275px);
      -moz-transform: rotateY(-72deg) translateZ(275px);
}

JavaScript

var isMouseDown = false;
var beginX = 0;
var beginY = 0;
var MoveThresholdX = 40;
var MoveThresholdY = 20;
var AcceptThresholdX = 100;
var AcceptThresholdY = 20;
var dX = 0;
var dY = 0;
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
    prop, el = document.createElement('div');
var xAngle = 0,
    yAngle = 0,
    position = 1;

$(document).ready(function() {

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

    $('body').keydown(function(evt) {
        switch (evt.keyCode) {
        case 37:
            // left
            yAngle += 72;
            if (position === 1) {
                position = 5;
            } else {
                position--;
            }
            break;

/*
                case 38: // up
            xAngle += 90;                
            break;
                */

        case 39:
            // right
            yAngle -= 72;
            if (position === 5) {
                position = 1;
            } else {
                position++;
            }
            break;

/*            
        case 40: // down
            xAngle -= 90;
            break;
                */
        };
        document.getElementById('cube').style[prop] = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    });

    /**    $('.face').click(function() {
     var id = parseInt(this.id, 10);
     switch (id - position) {
     case 1:
     case -4:
     yAngle -= 72;
     break
     case -1:
     case 4:
     yAngle += 72;
     break;
     }
     position = id;
     document.getElementById('cube').style[prop] = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
     });
     /**/
    var touch, touchX, touchY;
    $("#cube").on('mousedown touchstart', function(e) {
      //  $("#1").html("ST");
        beginX = e.pageX;
        beginY = e.pageY;
        if(...