Jquery.trid Example

Overview

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.

Example DOM

<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>

Example Code

$(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);
});

How to Use

$([selector]).tridView({"useMouse":[boolean],"perspective":[number]})

Sets up the trid scene using this DOM object as the root. Returns the same selector.

$([selector]).trid({"x":[number],"y":[number],"z":[number],"rx":[number],"ry":[number],"rz":[number],"sx":[number],"sy":[number],"sz":[number],})

Enables 3D transformation on this DOM element. XYZ represent position translation. RxRyRz represent rotation. SxSySz represent scaling. All transformations are applied to the parent DOM element's transform matrix (IE, transforms stack from parents to children). All transformations are optional and previous transformation settings will be preserved if they are not replaced with new numbers. All calls to trid() are buffered until the frame is resolved using tridTick(). Trid() returns the selector it was called from.

$.tridTick()

Applies all pending trid transforms.

Postscript

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