Я работал над довольно простыми преобразованиями webkit для создания (непрофессиональных) анимаций. У меня все хорошо, за исключением одного вопроса, по которому мне еще предстоит найти информацию. Здесь идет:
Описание: у меня есть прямоугольный div, который я поворачиваю на 90 градусов, используя target.style.webkitTransform + = 'rotateZ (90deg)'; это нормально - и я перевожу его, используя target.style.webkitTransform + = 'translate3d (50px, 0px, 0px)';
Проблема: Когда вы вращаете, ось элемента также вращается, и если вы перемещаете (например) по оси x, объект будет двигаться в новом направлении (к которому обращен элемент), например. 50 пикселей вниз в примере выше (после поворота).
Мне нужен способ пересчета / сброса оси (без изменения вращения), чтобы анимация имела смысл для непрофессионала, т. Е. Для программистов легко увидеть, что объект направлен в другом направлении, но не для технаря оставленный пользователь всегда останется левым.
Требование: когда пользователь говорит переместить его на 50 пикселей по оси x, он должен переместиться на 50 пикселей по оси x (для пользователя) независимо от вращения или любого другого преобразования, примененного к нему заранее.
Далее: я не буду заранее знать, как пользователь будет манипулировать объектом, поэтому я не могу принимать фиксированные значения и обходить их, поэтому мне нужна формула для пересчета / сброса всего, учитывая свойства стиля объекта и конструкцию дальнейшие преобразования.