3D-вращение без jQuery (jQuery 3D plugin)

#javascript #html #css #3d

Существует отличный плагин (http://www.zachstronaut.com/projects/rotate3di/#demos)
для вращения элементов разметки. Использование плагина весьма просто и удобно
$('#something').click(function () {
    $(this).rotate3Di('-=180', 1000);
});

где #something - это тот элемент, который нужно вращать по клику. Однако возникла
необходимость вращать элемент без подключения внешних библиотек, вроде jQuery. Как
это сделать одним HTML5/CSS3/JavaScript?    

Ответы

Ответ 1

Вариант №1 - изучить исходники
http://www.zachstronaut.com/js/rotate3di.js
и почитать инфу тут:
http://www.zachstronaut.com/projects/rotate3di/#demos
Используется transform вкупе со skew и scale.
Нужно будет переписать анимацию на setTimeout (а лучше на requestAnimationFrame +
setTimeout) и просто можно заюзать формулы преобразований их исходника.
Вариант №2 - заняться изучением css3 более подробно:
http://www.html5rocks.com/en/tutorials/3d/css/
http://www.netmagazine.com/features/20-stunning-examples-css-3d-transforms


Ответ 2

Работай с матрицами напрямую, смотри доки к функциям OpenGL. Зачем? Затем, что там
заодно описана матрица. Нужна матрица вращения? Пожалуйста - http://www.opengl.org/sdk/docs/man/xhtml/glRotate.xml
, там есть матрица, хромом не отображает, так что юзай Oper'y. 
Напиши функцию перемножения матрицы на вектор. Кстати, матрицы, описываемые на том
сайте, ориентированы по столбцам (прошу прощения за некорректное выражение), т.е. чтобы
получить результирующий вектор - необходимо именно матрицу умножить на вектор-столбец.
PS. Посмотрел, там не хватает перспективы! Так что матрицы - это ваше все. Цените
их, пока они не обиделись.


Ответ 3


    
front
    
back

    

Для chrome пример : http://jsfiddle.net/zNvP6/