Awesome jQuery Plugin For 3D Animation with CSS3 - Trid

Trid is a cool jQuery plugin that allows to automatically converts HTML5 DOM elements into a 3D scene using CSS3 Transforms. The 3D object can be dragged by mouse and scaled by holding CTRL key.

Basic Usage:

1. Include the latest jQuery library and jQuery Trid on the web page

<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.trid.js"></script>

2. Create the HTML5 DOM elements

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

3. The CSS

div.sprite {
width: 1200px;
height: 1200px;
top: -600px;
left: -600px;
border: 1px solid black;
font-size: 100px;
background-image: url('Morning_Dew_by_Lars_Clausen.png');
background-size: cover;
color: white;
}
div.sprite h3 {
margin-left: 100px;
font-family: Arial;
}

4. The javascript

<script>
$(function() {
$('#view').tridView({useMouse: true});
$('#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});
$.tridTick();
},1);
});
</script>

---

This awesome jQuery plugin is developed by curvedinfinity. For more Advanced Usages, please check the demo page or visit the official website.