Welcome to Jquery.trid
, a Jquery plugin which automatically converts DOM elements into a 3D scene using CSS3 Transforms. Try dragging the example around. Then drag the example while holding CTRL. Trid is designed for simplicity and a small basic app footprint.
<div id="view" style="z-index: -1">
<div id="box">
<div id="box1" class="sprite"><h3>Side 1</h3></div>
<div id="box2" class="sprite"><h3>Side 2</h3></div>
<div id="box3" class="sprite"><h3>Side 3</h3></div>
<div id="box4" class="sprite"><h3>Side 4</h3></div>
<div id="box5" class="sprite"><h3>Side 5</h3></div>
<div id="box6" class="sprite"><h3>Side 6</h3></div>
</div></div>
$(function() {
$('#view').tridView();
$('#box').trid({z:-1000});
$('#box1').trid({rx:90,y:-600});
$('#box2').trid({rx:-90,y:600});
$('#box3').trid({ry:90,x:600});
$('#box4').trid({ry:-90,x:-600});
$('#box5').trid({rz:180,z:-600});
$('#box6').trid({rz:0,z:600});
a = 0;
window.setInterval(function() {
$('#box').trid({rz:a+=0.1,rx:a*0.77,ry:a*1.13});
$.tickTrid();
},1);
});
Selecting is disabled across the DOM while trid captures the mouse. To disable this, call tridView() with no arguments.
As of writing this, the inner scrollbar of this div is broken due to Jquery 1.9.1 firing mousedown but not mouseup on it from the context of window. This is a documented bug in Jquery. There are workarounds but I have not put them in this example in case the bug is fixed. Thanks -Chase