javascript - -webkit-transform-origin の位置をマークするにはどうすればよいですか?

Question

私はCSSアニメーションを作成するためにCSS3を使用しています。私はrotateXを使って画像を回転させています。回転ポイントがどこにあるかを正確に確認できるように、何らかの方法で原点の位置をマークしたいと思います。

-webkit-transform-origin の位置をマークするにはどうすればよいですか? CSS や JavaScript など、あらゆるソリューションを受け入れます。

Answer 1

私が使用している chrome のバージョン (バージョン 18) では、-webkit-transformation-originどの要素の も常に最初は要素の中心であり、その要素を基準にして、両方の座標が床になっています。だからもし

element.style.webkitTransformationOrigin

が空の文字列の場合、次のようになります

Math.floor(element.width/2) + "px " + Math.floor(element.height/2) + " px".

空の文字列でない場合は、その形式になり[x]px [y]px、2 つの座標の間にスペースが入ります。あなたの場合のように、必要に応じて正規表現で値を抽出できます。値は要素に対して相対的であるため、ページ上の要素の絶対位置を取得し、原点を追加する必要があります原点の絶対位置を取得します。