CODEWITHSUNDEEP
javascripthtmlcsscss-animations
AJ Naidas
AJ Naidas

Reputation: 1424

CSS3 storing current animation values

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!

Upvotes: 2

Views: 924

Answers (2)

Spadar Shut
Spadar Shut

Reputation: 15797

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.

Upvotes: 4

kontur
kontur

Reputation: 5220

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-;

Upvotes: 1

Related Questions