CSS3 rotateY без примененных переходов

Question

Я ищу простой способ взять объект и преобразовать его свойство rotateY без его анимации к его предварительно установленному переходу. Это поможет мне завершить слайд-шоу (ТОЛЬКО ПРОСМОТР В ХРОМЕ ИЛИ САФАРИ (WEBKIT))

Вот пример разбивки эффекта:

CSS - Переход установлен на 5 с

Фаза 1

Элемент1 - rotateY: 0;

Элемент2 - вращатьY: -180;

Пользователь - нажимает кнопку

Фаза2

Элемент1 - rotateY: 180;

Элемент2 - rotateY: 0;

Phase3

Элемент1 -rotateY: -180;

Элемент2 - rotateY: 0;

Пользователь - нажимает кнопку

Phase4

Элемент1 - повернутьY: 0;

Элемент2 - повернутьY: 180;

После первого перехода (фаза 1 и2) завершает, значение rotateY Element1 должно быть установлено равным -180 без перехода, чтобы оно находилось в положении Element2 в Фаза 1.При этом анимация заставит элементы вращаться вокруг друг друга, как вы можете видеть на приведенной мной ссылке на пример.К сожалению, эффект прекращается после того, как все элементы имеют rotateY: 180;

Я хотел бы сделать jsFiddle, но у меня действительно нет времени сейчас на этот проект.

Iнужно решение, которое просто переносит объект из точки а в б без какой-либо анимации / перехода

Надеюсь, что все имеет смысл

Answer 1

Если вы пытаетесь вращать объект без перехода, то вам вообще не следует устанавливать переход. Установите только преобразование:

$(this).css('-webkit-transform','rotateY(180deg)');

$(this).css('-webkit-transform','rotateY(0)');

Пример в реальном времени, показывающий отсутствие перехода при повороте: http://jsfiddle.net/2XU7D/4/

Answer 2

В качестве альтернативы вы можете сделать одну вещь, создайте два класса:

.enable{ -webkit-transform : rotateY(180deg); -webkit-transition : 10s; }
.disable{ -webkit-transform : rotateY(0deg); -webkit-transition : 0; }

и проверяет класс вы хотите событие.