Test: jsFiddle GitHub Integration
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); | |
} |
<div id="box" style="top: 108px; left: 152px;"> | |
<div class="top"></div> | |
<div class="left"></div> | |
<div class="right"></div> | |
</div> |
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; | |
} | |
} | |
}; |
name: The Name of the Fiddle | |
description: jsFiddle GitHub Integration Test | |
authors: | |
- Christian Fleschhut | |
resources: | |
- http://some.url.com/some/file.js | |
- http://other.url.com/other_filename.css | |
normalize_css: no |
This comment has been minimized.
This comment has been minimized.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
http://jsfiddle.net/gh/gist/jquery/1.6.2/1084750/