Плагин jQuery: rotate3Di - Вращение содержания HTML страницы в 3D

Rotate3Di - плагин jQuery для создания эффекта 3D вращения любого содержания HTML страницы. Также возможно устанавливать собственную анимацию 3D вращения. Для создания эффекта используются трансформации CSS3. Поддерживается в браузерах: Safari, Chrome, Firefox 3.5+, IE9+, и Opera 11+. Функцилнал плагина включает: установку или анимацию содержания HTML под нужным углом в изометрической проекции, перевороты и переключение состояния перевернутого объекта.

Демонстрация

Установка

Для использования плагина rotate3Di к вашей странице должна быть подключена библиотека jQuery версии v1.2.6 или новее, патч для трансформаций CSS jQuery, и плагин rotate3Di — в указанном ниже порядке следования инструкций включения кодаin that order:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rotate3Di/base.js"></script>
<script type="text/javascript" src="rotate3Di/rotate3Di.js"></script>

После подключения указанных файлов плагин Rotate3Di можно использовать как и любой другой код jQuery:

$('#rot-ex').rotate3Di(180, 3000);

Описание

Метод: rotate3Di(градус, [длительность], [опции])

Аргументы:
градус	число, строка
Угол поворота вокруг изометрической оси Y. Может иметь положительные или отрицательные значения. Также может иметь относительное значение, как описано в документации по эффектам анимации jQuery (например 180, -360, '+=270'). Или иметь строчное значение 'flip', 'unflip', или 'toggle'.
длительность	число, строка	(опционально)
Строка, которая представлет одну из предустановленных скоростей выполенения эффекта ('slow', 'normal', или 'fast') или число миллисекунд (например, 1000).
опции	объект	(опционально)
Объект, который представляет набор опции для конфигурации анимации. Все опции эффекта анимации jQuery можно исопльзовать наряду с теми, что перечислены в таблице.

Опции:
direction	строка	Значение по умолчанию: 'anticlockwise'
Определяет направление вращения как 'clockwise' или 'anticlockwise' / 'counterclockwise' когда аргумент градус имеет значение 'flip', 'unflip', или 'toggle'. Когда аргумент градус имеет числовое значение, направление вращения определяется знаком значения(положительное число соответствует вращению по часовой стрелке).
sideChange	function ([front])
Возвратная функция, который принимает значение true, когда объект повернут лицевой частью. В области видимости функции this явялется вращаемым объектом. Если вы поворачиваете объект плагином rotate3Di и задаете функцию sideChange, перевернутая сторона объекта будет выводиться в нормальном виде, а не в зеркальном отражении.
complete	function ()
Возвратная функция, которая выполняется по завершению анимации.
easing	строка	Значение по умолчанию: 'swing'
Наименование эффекта перехода. Можно использовать два значения: 'linear' и 'swing'.

Примеры использования

Статический поворот на определнный угол

Плагин Rotate3Di можно использовать для статического поворота содержания на определнный угол.

Код:

$('#ex1').rotate3Di(30);

Анимация вращения

Плагин Rotate3Di может анимировать вращение объекта can на определнный угол вокруг изометрической оси Y. Нажмите на пример, приведенный ниже. Обратите внимание, как только анимация завершится, объект станет повернутым на 180 градусов относительно изометрической оси Y, и, следовательно, повторное нажатие на него не будет вызывать ни каких действий.

Код:

$('#ex2').click(function () {$(this).rotate3Di(180, 1000);});

Анимация вращения на относительный угол

Плагин Rotate3Di может использоваться для анимации вращения на относительный угол вокруг изометрической оси Y. Нажмите на пример, приведенный ниже. Вращение осуществляется на -180 градусов (то есть, против часовой стрелки). Если снова нажать на объект, то вращение повторится.

Код:

$('#ex3').click(function () {$(this).rotate3Di('-=180', 1000);});

Значения flip, unflip, и toggle

Плагин Rotate3Di можно использовать для переворотов объектов без указания цифровых значений угла.

Код:

// Два замечания:
//     1. Мы используем .stop() для предотвращения построения цепочки анимаций
//     2. Мы перехватываем событие hover для другого элемента, который не вращается.
//        Таким образом, если наш объект при вращении выйдет из области действия 
//        курсора, то вращение продолжится.
$('#ex4').hover(
    function () {$(this).find('p').stop().rotate3Di('flip', 500);},
    function () {$(this).find('p').stop().rotate3Di('unflip', 500);}
);

$('#ex5').click(function () {$(this).rotate3Di('toggle', 1000);});
$('#ex6').click(function () {
    $(this).rotate3Di('toggle', 1000, {direction: 'clockwise'});
});

Используем возвратные функции

Плагин Rotate3D имеет две возвратные функции. Можно выполнять различные действия при вращении объекта и при завершении анимации. Нажмите на пример, приведнный ниже.

Код:

function mySideChange(front) {
    if (front) {
        $(this).css('background', '#f0f');
    } else {
        $(this).css('background', '#0f0');
    }
}

function myComplete() {
    $('#ex7').css('backgroundColor', '#f00');
}

$('#ex7').click(function () {
    $(this).rotate3Di(
        '360',
        3000,
        {
            sideChange: mySideChange,
            complete: myComplete
        }
    );
});