The Name of the Fiddle

jsFiddle GitHub Integration Test author(s): Christian Fleschhut

HTML

<script src="http://some.url.com/some/file.js"></script>
<link rel="stylesheet" href="http://other.url.com/other_filename.css">
<div id="box" style="top: 108px; left: 152px;">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

body { background: url(http://www.themaninblue.com/experiment/Cubescape/images/grid.gif); }
#box {
    position: absolute;
}
.top {
    width: 20px; height: 20px; background: hsl(40, 85%, 70%);
    -moz-transform: rotate(45deg) skew(-15deg, -15deg);
    -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {
    width: 20px; height: 20px; background: hsl(40, 85%, 55%);
    -moz-transform: skew(0deg, 26.6deg) translate(-9px, -4px) scale(0.9, 0.6);
    -webkit-transform: skew(0deg, 26.6deg) translate(-9px, -4px) scale(0.9, 0.6);
}
.right {
    width: 20px; height: 20px; background: hsl(40, 85%, 45%);
    -moz-transform: skew(0deg, -26.6deg) translate(9px, -24px) scale(0.9, 0.6);
    -webkit-transform: skew(0deg, -26.6deg) translate(9px, -24px) scale(0.9, 0.6);
}

JavaScript

window.onload = function() {

    var elem = document.getElementById("box");
    document.onkeydown = function(e) {
        var step = 5;
        switch (e.keyCode) {
        case 37:
            // left
            elem.style.left = parseInt(elem.style.left) - step * 2 + "px";
            elem.style.top = parseInt(elem.style.top) - step + "px";
            break;
        case 38:
            // top
            elem.style.left = parseInt(elem.style.left) + step * 2 + "px";
            elem.style.top = parseInt(elem.style.top) - step + "px";
            break;
        case 39:
            // right
            elem.style.left = parseInt(elem.style.left) + step * 2 + "px";
            elem.style.top = parseInt(elem.style.top) + step + "px";
            break;
        case 40:
            // bottom
            elem.style.left = parseInt(elem.style.left) - step * 2 + "px";
            elem.style.top = parseInt(elem.style.top) + step + "px";
            break;
        }
    }

};