Awesome jQuery Plugin For 3D Animation with CSS3 - Trid

File Size: 562KB
Views Total: 3170
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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 id="box2" class="sprite">
<h3>Side 2</h3>
<div id="box3" class="sprite">
<h3>Side 3</h3>
<div id="box4" class="sprite">
<h3>Side 4</h3>
<div id="box5" class="sprite">
<h3>Side 5</h3>
<div id="box6" class="sprite">
<h3>Side 6</h3>

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

$(function() {
$('#view').tridView({useMouse: true});
a = 0;
window.setInterval(function() {

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