Cubey

by Borna Almasi

HTML

<p> click this box and Press the arrow keys</p>
<div id="experiment">
        <div id="cube">
                <div class="face one">
                        Borna
                </div>
                <div class="face two">
                        LOREM IPSUM
                    LOREM IPSUM
                    LOREM IPSUMLOREM IPSUM
LOREM IPSUM
                    LOREM IPSUM
                    LOREM IPSUM
                </div>
                <div class="face three">
                        Lorem ipsum.sadasdasdasdasdasdasdadasd
                </div>
                <div class="face four">
                        POOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
                    oooooooooooooooooooo
                    oooooooooooooooo
                </div>
                <div class="face five">
                       3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube3D cube 
                </div>
                <div class="face six">
                        CONTENNTNTOENONEOTNONEONTTET
                </div>
        </div>
</div>

CSS

#cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(200px);
    }

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

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(200px);
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(200px);
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(200px);
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
    }


.face {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
      background-color: rgba(50, 0, 50, 0.7);
    }

 #cube {
      position: relative;
      margin: 0 auto;
      height: 300px;
      width: 300px;
      -webkit-transition: -webkit-transform 2s ease-out;
      -webkit-transform-style: preserve-3d;
    }

  #experiment {
margin-top:120px;                    
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
    }

JavaScript

var xAngle = 0, yAngle = 0;
        document.addEventListener('keydown', function(e)
        {
                switch(e.keyCode)
                {

                        case 37: // left
                                yAngle -= 90;
                                break;

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

                        case 39: // right
                                yAngle += 90;
                                break;

                        case 40: // down
                                xAngle -= 90;
                                break;
                };

                $('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
        }, false);