(素人向けの) アニメーションを作成するために、かなり単純な webkit 変換に取り組んできました。まだ情報が見つからない1つの問題を除いて、私はかなりうまくやっています. ここに行きます：
説明: target.style.webkitTransform += 'rotateZ(90deg)'; を使用して、90 度回転する長方形の div があります。これで問題ありません - target.style.webkitTransform += 'translate3d(50px, 0px, 0px)'; を使用して翻訳します。
問題: 回転すると、要素の軸も回転し、(たとえば) x 軸で平行移動すると、オブジェクトは新しい方向 (要素が向いている方向) に移動します。たとえば、上記の例では 50 ピクセル下に移動します。 (回転後)。
アニメーションが素人にとって意味のあるものになるように、(回転を変更せずに) 軸を再計算/リセットする方法が必要です。つまり、プログラマーにとっては、オブジェクトが別の方向を向いていることを簡単に確認できますが、技術者以外のユーザーは左になります。常に残っています。
要件: ユーザーが x 軸で 50px 移動すると言う場合、事前に適用された回転やその他の変換に関係なく、(ユーザーにとって) x 軸で 50px 移動する必要があります。
さらに、ユーザーがオブジェクトをどのように操作するかを事前に知ることはできないため、固定値を取得してそれらを回避することはできません。したがって、オブジェクトのスタイルプロパティを指定してすべてを再計算/リセットし、さらに変換を構築する式が必要です。