2

私はそのように回転アニメーションを行っているdivを持っています：

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

私がしたいのは、イベントをトリガーするとき（たとえば、マウスクリック）、アニメーションの時点での現在のrotateYを変数に格納したいということです。たとえば、アニメーションが約140度のときにクリックイベントがトリガーされた場合、140度を変数に格納する必要があります。現在のrotateY値を返す方法を知っている人はいますか？tnx！

4

2 に答える 2

4

css 値を取得するにgetComputedStyleは、window のメソッドを呼び出して、アニメーション化された要素をそれに渡します。

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 に答える