Преобразования на элементах dom

Question

Сначала я был действительно взволнован элементом HTML5 canvas.Но это не будет работать для моей идеи сейчас, когда я понимаю, для чего она предназначена.

По сути, я хочу отобразить неупорядоченный список в 3-м измерении, выполнив небольшое вращение вокруг него вокруг оси y.Ничего «базового» в этом нет.Есть ли плагин jquery, который может помочь мне создать эту иллюзию?Если нет, возможно, мне придется попытаться создать его самому.см. ниже.

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

Answer 1

Я бы создал его сам.

Еще хуже, я уже сделал: http://annejan.com/html5/demo/jinx.js

ПРИМЕЧАНИЕ. ПРИМЕР ХОЛСТ, НО МАТУС ДОЛЖЕН РАБОТАТЬ С ДРУГИМИ ЭЛЕМЕНТАМИ.

Следующий код допускает поворот на 2 угла, добавление третьего угла тривиально.

Для вашего (точного) вопроса это даже можно упростить!

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

Answer 2

CSS 3D поддерживается только некоторыми браузерами webkit.Другие браузеры могут эмулировать трехмерное поведение только с помощью двумерных преобразований (масштабирование и наклон).

Для этой цели jQuery 2D Transformation Plugin является кросс-браузерным решением IE6 +.

Если вы хотите CSS 3D-преобразования, тогда вы можете использовать Modernizr дляпроверьте, поддерживаются ли они, в противном случае вернитесь к 2D-эмуляции с помощью плагина jQuery 2D Transformation.