CSS3 Твинс и Матрица

Question

Я собрал несколько ключевых кадров анимации в CSS, которые анимируют div с одной стороны экрана на другую, применяя небольшое вращение по пути. Я считаю, что подход ключевого кадра ограничен, потому что я хочу иметь много вариантов, которые входят в одну большую последовательность. В качестве примера можно привести вариации не только слева направо, справа налево, но и сверху вниз и так далее. Чтобы еще больше усложнить задачу, мне нужно уметь перемешивать эту последовательность и сохранять непрерывность между каждой анимацией.

Сама последовательность должна работать в любом порядке и сбрасываться.

Например, если я хочу переместить div в фазах по 100px:

left (100px), up (100px), left (100px) and then down(100px)

в следующий раз мне может понадобиться следующая последовательность (снова 100px):

left, down, right, up

Я думаю, что этого было бы лучше достичь, используя JavaScript для написания анимации на лету, возможно, используя что-то вроде CSS3 Matrix. До сих пор я разобрался с такими легкими вещами, как левый и правый, но не могу понять, как добавлять по очереди. Это похоже на действительно хорошую отправную точку:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Также смотрю на это:

http://tweenjs.com/

Мои мысли таковы: а) чрезмерно ли я усложняю это, используя подход CSS Matrix? Есть ли что-то попроще? и б) Как я могу добиться поворота и перемещения одновременно, используя матрицу CSS или любой другой подход?

Любая помощь приветствуется!

Answer 1

Если вы хотите создавать динамические анимации, тогда вы должны использовать JavaScript для анимации.

Что касается того, как объединить перевод с вращением, ответ прямо в посте пользователя useragentman (что, кстати, является очень хорошим введением в матрицы CSS).

Возьмем угол поворота (в радианах), которого вы хотите достичь, и создайте следующую матрицу:

Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0,            0,        1

, а затем создайте следующую матрицу для вашего (предположительно 2D) движения по x и y.

0,0,X
0,0,Y
0,0,1

Затемумножьте их вместе (или возьмите скалярное произведение в матричной терминологии).Вот удобный матричный множитель для вас, подробности того, как создать точечное произведение, также находятся в том же посте.

Обратите внимание, что это преобразования (не изменения позиции) и преобразования donне влияет на положение страницы.