Skip to content

Instantly share code, notes, and snippets.

@adrusi

adrusi/orthographic.html

Created December 22, 2010 02:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adrusi/750992 to your computer and use it in GitHub Desktop.
Save adrusi/750992 to your computer and use it in GitHub Desktop.
Download ZIP
css3 & js orthographic drawing library
Raw
orthographic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
input[type=range] {
display: inline-block;
vertical-align: middle;
}
.ortho {
font-size: 25px;
padding: 50px;
}
.cube {
position: relative;
height: 1em;
width: 1em;
margin-right: -1em;
margin-bottom: -1em;
margin-top: 0;
margin-left: 0;
padding: 0;
display: block;
line-height: 0;
}
.cube .top {
position: absolute;
height: 1em;
width: 1em;
-webkit-transform: scaleY(0.5) rotate(60deg);
-moz-transform: scaleY(0.5) rotate(60deg);
}
.cube .left {
position: absolute;
height: 1em;
width: 1em;
-webkit-transform: translateX(-42%) translateY(63%) scaleX(0.5) skewY(24deg);
-moz-transform: translateX(-42%) translateY(63%) scaleX(0.5) skewY(24deg);
}
.cube .right {
position: absolute;
height: 1em;
width: 1em;
-webkit-transform: translateX(25%) translateY(71%) scaleX(0.85) skewY(166deg);
-moz-transform: translateX(25%) translateY(71%) scaleX(0.85) skewY(166deg);
}
.red .right { background: #ff0000; }
.green .right { background: #00ff00; }
.blue .right { background: #0000ff; }
.yellow .right { background: #ffff00; }
.orange .right { background: #ff8800; }
.purple .right, .violet .right { background: #bb00bb; }
.red .top { background: #dd0000; }
.green .top { background: #00dd00; }
.blue .top { background: #0000dd; }
.yellow .top { background: #dddd00; }
.orange .top { background: #dd7700; }
.purple .top, .violet .top { background: #aa00aa; }
.red .left { background: #bb0000; }
.green .left { background: #00bb00; }
.blue .left { background: #0000bb; }
.yellow .left { background: #bbbb00; }
.orange .left { background: #bb6600; }
.purple .left, .violet .left { background: #990099; }
</style>
<title>Cubes</title>
</head>
<body>
<form>
<label for="scale">Scale: </label><input type="range" id="scale" min="5" max="100" value="25" />
</form>
<div class="ortho">
<!--
This is just a demo, each <div> is one cube. Its x, y and z
positions are defined by its attributes. Its color is defined
by its class.
Y is the vertical axis. The higher the value the lower the
cube appears on the page.
X is the axis with a slight positive slope. The higher the
value, the farther right and up on the page the cube appears.
Z is the axis with a slight negative slope. The higher the
value, the farther right and down the cube appears.
-->
<div class="green cube" data-x="2" data-y="8" data-z="0"></div>
<div class="green cube" data-x="0" data-y="8" data-z="0"></div>
<div class="green cube" data-x="2" data-y="7" data-z="0"></div>
<div class="green cube" data-x="1" data-y="7" data-z="0"></div>
<div class="green cube" data-x="0" data-y="7" data-z="0"></div>
<div class="green cube" data-x="2" data-y="6" data-z="0"></div>
<div class="green cube" data-x="0" data-y="6" data-z="0"></div>
<div class="green cube" data-x="2" data-y="5" data-z="0"></div>
<div class="green cube" data-x="1" data-y="5" data-z="0"></div>
<div class="green cube" data-x="0" data-y="5" data-z="0"></div>
<div class="green cube" data-x="2" data-y="9" data-z="0"></div>
<div class="green cube" data-x="0" data-y="9" data-z="0"></div>
<div class="yellow cube" data-x="3" data-y="5" data-z="2"></div>
<div class="yellow cube" data-x="4" data-y="5" data-z="2"></div>
<div class="yellow cube" data-x="5" data-y="5" data-z="2"></div>
<div class="yellow cube" data-x="3" data-y="6" data-z="2"></div>
<div class="yellow cube" data-x="5" data-y="6" data-z="2"></div>
<div class="yellow cube" data-x="3" data-y="7" data-z="2"></div>
<div class="yellow cube" data-x="4" data-y="7" data-z="2"></div>
<div class="yellow cube" data-x="5" data-y="7" data-z="2"></div>
<div class="yellow cube" data-x="3" data-y="8" data-z="2"></div>
<div class="yellow cube" data-x="4" data-y="8" data-z="2"></div>
<div class="yellow cube" data-x="3" data-y="9" data-z="2"></div>
<div class="yellow cube" data-x="5" data-y="9" data-z="2"></div>
<div class="purple cube" data-x="6" data-y="5" data-z="4"></div>
<div class="purple cube" data-x="7" data-y="5" data-z="4"></div>
<div class="purple cube" data-x="8" data-y="5" data-z="4"></div>
<div class="purple cube" data-x="6" data-y="6" data-z="4"></div>
<div class="purple cube" data-x="6" data-y="7" data-z="4"></div>
<div class="purple cube" data-x="7" data-y="7" data-z="4"></div>
<div class="purple cube" data-x="8" data-y="7" data-z="4"></div>
<div class="purple cube" data-x="8" data-y="8" data-z="4"></div>
<div class="purple cube" data-x="6" data-y="9" data-z="4"></div>
<div class="purple cube" data-x="7" data-y="9" data-z="4"></div>
<div class="purple cube" data-x="8" data-y="9" data-z="4"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function draw() {
var cube = $('.cube'),
ortho = $('.ortho'),
max = [0, 0, 0];
cube.append('<div class="top"></div>');
cube.append('<div class="left"></div>');
cube.append('<div class="right"></div>');
cube.each(function() {
if (parseInt($(this).attr('data-x')) > max[0]) max[0] = parseInt($(this).attr('data-x'));
if (parseInt($(this).attr('data-y')) > max[1]) max[1] = parseInt($(this).attr('data-y'));
if (parseInt($(this).attr('data-z')) > max[2]) max[2] = parseInt($(this).attr('data-z'));
});
cube.each(function() {
$(this).css({
left: 0.84 * parseInt($(this).attr('data-x')) + 0.49 * parseInt($(this).attr('data-z')) + 'em',
top: -0.25 * parseInt($(this).attr('data-x')) + 0.46 * parseInt($(this).attr('data-z')) + 'em',
zIndex: (parseInt($(this).attr('data-z')) * max[1].toString().length * max[0].toString().length) - (parseInt($(this).attr('data-y')) * max[0].toString().length) - (parseInt($(this).attr('data-x')) * max[0]),
'-webkit-transform': 'translateY(' + $(this).attr('data-y') + 'em)',
'-moz-transform': 'translateY(' + $(this).attr('data-y') + 'em)'
});
});
}
$(function() {
var cube = $('.cube'),
ortho = $('.ortho'),
max = [0, 0, 0];
draw();
$('#scale').change(function() {
ortho.css({
fontSize: $(this).val() + 'px'
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment