Skip to content

Instantly share code, notes, and snippets.

@peterhry
Created January 10, 2013 20:02
Show Gist options
  • Save peterhry/4505306 to your computer and use it in GitHub Desktop.
Save peterhry/4505306 to your computer and use it in GitHub Desktop.
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
<div class="viewport">
<div class="model">
<ul class="axis">
<li class="plane x">
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<span class="label unselectable left">Min</span>
<span class="label unselectable right">Max</span>
</li>
<li class="plane y">
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<span class="label unselectable left">Min</span>
<span class="label unselectable right">Max</span>
</li>
<li class="plane z">
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<span class="label unselectable left">Min</span>
<span class="label unselectable right">Max</span>
</li>
</ul>
<ul class="cube bounds">
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
<li class="side">
<ul>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
<li class="poly"></li>
</ul>
</li>
</ul>
</div>
</div>
$(document).ready(function(){
var mouseStartX,
mouseStartY,
rotX = 0,
rotY = 0,
rotStartX,
rotStartY,
viewport = $('.viewport'),
win = $(window),
model = $('.model'),
viewport.mousedown(startDrag);
viewport.get(0).addEventListener('touchstart', startDrag, false);
viewport.get(0).addEventListener('touchend', stopDrag, false);
win.mouseup(function(){
stopDrag();
console.log('mouse up')
})
model.bind('webkitTransitionEnd', function(event){
axis.css('webkitTransitionDuration', '0');
});
function startDrag(event) {
mouseStartX = event.pageX
mouseStartY = event.pageY
model.css('webkitTransitionDuration', '0');
rotStartX = rotX;
rotStartY = rotY;
win.mousemove(drag);
win.get(0).addEventListener('touchmove', drag, false);
}
function drag(event) {
rotX = rotStartX + ( ( mouseStartY - event.pageY ) / viewport.outerWidth() * 180 )
rotY = rotStartY - ( ( mouseStartX - event.pageX ) / viewport.outerWidth() * 180 )
model.css('webkitTransform', 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)');
event.preventDefault();
event.stopPropagation();
return false;
}
function stopDrag() {
win.unbind('mousemove');
win.get(0).removeEventListener('touchmove', drag, false);
}
});
html, body
{
width: 100%;
height: 100%;
}
.container
{
width: 100%;
height: 100%;
}
.unselectable
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.viewport
{
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 900;
-webkit-perspective-origin: 50% 20%;
cursor: move;
}
.viewport *
{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: visible;
margin: 0;
}
.model
{
-webkit-transition: all 1s;
top: 50%;
left: 50%;
position: absolute;
}
.poly { position: absolute; }
.plane { position: absolute; }
.plane .poly
{
width: 248px;
height: 248px;
border: 1px solid rgba(0,0,0,0.8);
}
.plane .poly:nth-child(1) { -webkit-transform: translate3d(0,0,0); }
.plane .poly:nth-child(2) { -webkit-transform: translate3d(0,-250px,0); }
.plane .poly:nth-child(3) { -webkit-transform: translate3d(-250px,-250px,0); }
.plane .poly:nth-child(4) { -webkit-transform: translate3d(-250px,0,0); }
.x { -webkit-transform: rotateX(90deg); }
.x .poly
{
background: #ffcccc;
opacity: 0.2;
}
.y { -webkit-transform: rotateZ(90deg); }
.y .poly
{
background: #ccffcc;
opacity: 0.2;
}
.z { -webkit-transform: rotateY(90deg); }
.z .poly
{
background: #ccccff;
opacity: 0.2;
}
.plane .label
{
position: absolute;
top: -8px;
left: 260px;
}
.plane .label.right
{
left: auto;
right: 260px;
}
.cube
{
position: absolute;
width: 100px;
height: 100px;
-webkit-transform-origin: 0 0 0;
-webkit-transition: all 0.5s;
}
.cube .side:nth-child(1) { -webkit-transform: translate3d(0, 0, 50px); }
.cube .side:nth-child(2) { -webkit-transform: translate3d(0, 0, -50px); }
.cube .side:nth-child(3) { -webkit-transform: translate3d(0, 0, -50px) rotateY(90deg); }
.cube .side:nth-child(4) { -webkit-transform: translate3d(-100px, 0, -50px) rotateY(90deg); }
.cube .side:nth-child(5) { -webkit-transform: translate3d(0, -50px, 0) rotateX(90deg); }
.cube .side:nth-child(6) { -webkit-transform: translate3d(0, 50px, 0) rotateX(90deg); }
.cube .poly
{
opacity: 1;
width: 50px;
height: 50px;
background-color: #333;
}
.cube .poly:nth-child(1) { -webkit-transform: translate3d(-50px, -50px, 0); }
.cube .poly:nth-child(2) { -webkit-transform: translate3d(0, -50px, 0); }
.cube .poly:nth-child(3) { -webkit-transform: translate3d(-50px, 0, 0); }
.cube .poly:nth-child(4) { -webkit-transform: translate3d(0, 0, 0); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment