CSS3 storing current animation values

Question

i have a div that is doing a rotation animation as such :

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

what I want to happen is that when I trigger an event (let us say a mouseclick), I want to store in a variable the current rotateY as of the animation. For example, if the click event is triggered while the animation is at around 140deg, I want that 140 degrees stored in a variable. Does anybody know how to return the current rotateY value? tnx!

Answer 1

I would wager your access the current rotation value like any other css value.

Javascript:

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

Answer 2

To get any css values you can call getComputedStyle method of window and pass the animated element to it:

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

The currentTransform will be a transformation matrix from which you need to calculate your values.

Here's a jsfiddle of how this works.