css3 & js orthographic drawing library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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