2

我有一个 div 正在做这样的旋转动画:

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

我想要发生的是,当我触发一个事件(让我们说一个鼠标点击)时,我想将动画的当前 rotateY 存储在一个变量中。例如,如果在动画大约 140 度时触发了点击事件,我希望将 140 度存储在一个变量中。有人知道如何返回当前的 rotateY 值吗?天呐!

4

2 回答 2

4

要获取任何 css 值,您可以调用getComputedStylewindow 的方法并将动画元素传递给它:

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

currentTransform将是一个转换矩阵,您需要从中计算值。

这是一个如何工作的jsfiddle

于 2012-01-16T08:59:32.903 回答
1

我敢打赌你访问当前的旋转值,就像任何其他 css 值一样。

Javascript:

var item = document.getElementById["yourId"];
var currentValueForAttribute = item.style.-attribute here-;
于 2012-01-16T08:25:32.920 回答