CSS3 хранит текущие значения анимации

Question

У меня есть div, который выполняет анимацию вращения как таковую:

@-webkit-keyframes animateCamera {
    from {-webkit-transform: translateZ(300px) rotateY(0deg);}
    to {-webkit-transform: translateZ(300px) rotateY(360deg);}}
}

Я хочу, чтобы при запуске события (скажем, щелчка мышью) я хотел сохранить в переменной текущий rotateY для анимации. Например, если событие щелчка инициируется, когда анимация находится на отметке 140 градусов, я хочу, чтобы 140 градусов были сохранены в переменной. Кто-нибудь знает, как вернуть текущее значение rotateY? TNX!

Answer 1

Чтобы получить любые значения CSS, вы можете вызвать getComputedStyle метод окна и передать ему анимированный элемент:

var animatedEl = document.getElementById('#myAnimatedEl');
var styles = window.getComputedStyle(animatedEl);
var currentTransform = styles.getPropertyCSSValue('-webkit-transform').cssText;

currentTransform будет матрицей преобразования изкоторый вам нужно рассчитать ваши значения.

Вот jsfiddle о том, как это работает.

Answer 2

Я бы поставил на ваш доступ текущее значение поворота, как и любое другое значение CSS.

Javascript:

var item = document.getElementById["yourId"];
var currentValueForAttribute = item.style.-attribute here-;