Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
@cfleschhut

This comment has been minimized.

Copy link
Owner Author

@cfleschhut cfleschhut commented Jul 15, 2011

@cfleschhut

This comment has been minimized.

Copy link
Owner Author

@cfleschhut cfleschhut commented Jul 18, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment