$(document).ready(function() { var tiltedLeft = false, tiltedRight = false; $('body').keydown(function(evt) { var xOrigin, zAngle; switch (evt.keyCode) { case 37: // left if (tiltedRight) { xOrigin = 200; zAngle = "-0"; tiltedRight = false } else if (tiltedLeft == false) { xOrigin = 100; zAngle = -90; tiltedLeft = true } break; case 39: // right if (tiltedLeft) { xOrigin = 100; zAngle = "-0"; tiltedLeft = false } else if (tiltedRight == false) { xOrigin = 200; zAngle = 90; tiltedRight = true } break; } var cube = $('#cube')[0]; cube.style["-webkit-transform-origin"] = xOrigin + "px 200px"; cube.style["-webkit-transform"] = "rotateZ(" + zAngle + "deg)"; }); });
<!doctype html> <html> <body> <div id="scene"> <div id="cube"> <div class="row"> <div class="face hidden"></div> <div class="face top"></div> <div class="face hidden"></div> <div class="face hidden"></div> </div> <div class="row"> <div class="face left"></div> <div class="face back"></div> <div class="face right"></div> <div class="face front"></div> </div> <div class="row"> <div class="face hidden"></div> <div class="face bottom"></div> <div class="face hidden"></div> <div class="face hidden"></div> </div> </div> <div id="grid"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div> </div> </body> </html>
#scene { margin-top: -50px; margin-left: 100px; -webkit-perspective: 1200; -webkit-perspective-origin: 90% -120px; } #cube { position: relative; margin: 0 auto; height: 400px; width: 400px; -webkit-transition: -webkit-transform 1s linear; -webkit-transform-style: preserve-3d; } .face { display: inline; float: left; border: 2px; border-style: solid; border-color: black; height: 96px; width: 96px; background-color: rgba(200, 10, 190, 0.4); } .hidden { visibility: hidden; } .left { -webkit-transform: rotateY(90deg); -webkit-transform-origin: center right; } .right { -webkit-transform: rotateY(-90deg); -webkit-transform-origin: center left; } .front { -webkit-transform: translateX(-200px) translateZ(100px); } .top { -webkit-transform: rotateX(-90deg); -webkit-transform-origin: bottom center; } .bottom { -webkit-transform: rotateX(90deg); -webkit-transform-origin: top center; } #grid { position: relative; margin: 0 auto; height: 400px; width: 400px; z-index: -1; -webkit-transition: -webkit-transform 1s linear; -webkit-transform-style: preserve-3d; -webkit-transform: translateY(-400px) rotateX(-90deg); } .row { float: left; } .cell { border: 2px; border-style: solid; border-color: grey; height: 96px; width: 96px; background-color: rgba(190, 190, 190, 0.7); }