Add suppot for change positions (x, y, z)

[belozer]

Example:

animate.position('x', '+100px', {duration: '200ms', delay: '1s'});
animate.position('y', '-100px', {duration: '200ms', delay: '1s'});
animate.position('z', '100px', {duration: '200ms', delay: '1s'});

or

animate.position({x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s'});

or

animate.start({x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s'});

[skad0]

How z will work?

[belozer]

@skad0 transform: translate3d(x,y,z)
http://www.w3schools.com/css/css3_3dtransforms.asp

demo
http://css3gen.com/css-3d-transform/

[belozer]

@skad0 This is a temporary name. Here the idea is whether to make such functionality or not.

[skad0]

@belozyorcev it should be, but i think name little bit confusing
p.s. sorry, i have accidentally deleted my previous comment :-(

[belozer]

name little bit confusing
@skad0 Yes. I agree..

By analogy with CSS may be called its transform

[belozer]

Have to decide with a convenient API.

[belozer]

Example:
animate.transform3D({x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s'});
or
animate.transform('3d', {x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s'});
or
animate.translate3d({x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s'});

[Flyer3d]

Тогда в параметры я бы еще добавил easing

[Flyer3d]

Мне кажется 3D в названии/параметрах избыточно. Параметры XYZ могут быть необязательными или нулевыми по умолчанию

[Flyer3d]

Мне кажется наиболее точной такая запись:

animate.translate({x: '100px', y: '-100px', z: '10px', duration: '200ms', delay: '1s', easing: 'linear'})

так как мы именно перемещаем объект в заданную точку.

Также можно ввести функции

animate.setPosition({x: '100px', y: '-100px', z: '10px'})
animate.setOrigin({x: '100px', y: '-100px', z: '10px'})

Для задания начальной позиции и точки вращения

[belozer]

У Transform в CSS есть куча разных методов

Можно каждый сделать на каждый CSS метод аналогичный в корне блока.
А можно обернуть всё это в transform метод

[Flyer3d]

В принципе можно сделать универсальный метод transform, и к нему алиасы translate, rotate, scale

[belozer]

Пока склоняюсь к чему-то такому:

// Корректировка отдельных транфсормаций
animate.translate3d('100px', '-100px', '10px', { duration: '200ms', delay: '1s', onEnd : () => {} });
animate.translateY('100px', { duration: '200ms', delay: '1s'});
animate.scaleZ('100px', { duration: '200ms', delay: '1s'});

// Несколько трансформаций одновременно
// Возможно стоит оставить только этот способ и не распылятся на "100 методов"
// Дополнительно проще контролировать кэлбэки анимаций
animate.tranform({
    translate3d : '100px, -100px, 200px', // → string или string[]?...
    scaleZ : '20px'
}, { duration: '200ms', delay: '1s', onEnd : () => {} });

Вот только есть размышления над тем, как должен работать tranform... Добавлять/обновлять свойства или заменять полностью.

Возможно имеет смысле сделать 2 метода. transform и addTransform

И если всё-таки распылятся на алиасы, то они должны работать через addTranform. Т.к. мы говорим блоку что нужно с ним сделать прямо сейчас в его текущем состоянии.