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

commented Jul 15, 2011

@cfleschhut

This comment has been minimized.

Copy link
Owner Author

commented Jul 18, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.