Question

At first I was really excited about HTML5’s canvas element. But It will not work for my idea now that i understand what it is intended for.

Basically I want to display an unordered list in 3rd dimention by perfroming a slight rotation on it about the y-axis. Nothing “basic” about that. Is there any jquery plugin that can help me to create this illusion?
If not, I may have to attempt to create one myself. see below.

 <div id="angleit" class="padding">
     <ul>
         <li>item 1</li>
         <li>item 2</li>
         <li>item 3</li>
     </ul>
 </div>

Answer 1

I would create it myself.

Even worse, I already did: http://annejan.com/html5/demo/jinx.js

NOTE THE EXAMPLE IS CANVAS BUT THE MATH SHOULD WORK WITH OTHER ELEMENTS ALSO.

The following code allows for rotation in 2 angles, it’s trivial to add a third angle.

For your (exact) question it could even be simplified!

this.rotateXY = function(angleX, angleY) {
  // might do with some more hard coding ;)
  var xy, xz, yz;

  sinRY = Math.sin(angleX * TO_RADIANS);
  cosRY = Math.cos(angleX * TO_RADIANS);
  sinRX = Math.sin(angleY * TO_RADIANS);
  cosRX = Math.cos(angleY * TO_RADIANS);

  xy = (cosRX*this.y)-(sinRX*this.z);
  xz = (sinRX*this.y)+(cosRX*this.z);
  yz = (cosRY*xz)-(sinRY*this.x);
  this.x = (sinRY*xz)+(cosRY*this.x);
  this.y = xy;
  this.z = yz;
}