CSS3 animation on transform: rotate. Way to fetch current deg of the rotating element?

Question

Hi everybody,

i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -webkit-animation.

@-webkit-keyframes pulse {
   0%   { -webkit-transform: rotate(0deg);  }
   25%  { -webkit-transform:rotate(-10deg); }
   75%  { -webkit-transform: rotate(10deg); }
   100% { -webkit-transform: rotate(0deg);  }
  }

.drag
{
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

When I drop the target, I want it to adopt the current state of rotation.

My first thought was to check the css property with jquery and the .css('-webkit-transform') method. But this method just returns 'none'.

So my question: Is there a way to get the current degree value of an element which is rotated via animation?

Thanks so far Hendrik

Answer 1

I do not believe this is possible. Only keyframe properties are exposed to the DOM.

http://www.w3.org/TR/css3-animations/#animation-events-

(Now, a hacky way to get what you need is to create keyframes for each degree of rotation, so when the drop occurs the animation will stop at the appropriate rotation.)