web-dev-qa-db-ja.com

cssrotateで変換された要素の位置を取得する方法

rotateフィルターが適用された後、divの位置を取得する際に問題が発生しました。一端の位置、高さ、回転角度がありますが、このフィルターがMDNで実際に何をするかを確認した後（ "[cos（angle）sin（angle）-sin（angle）cos（angle） 0 0] "）私はまだそれをクラックする方法がわかりません。

例：

enter image description here

私が興味を持っているdivは破線です。その瞬間のスタイリングは：

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

（top/leftはその始まりの位置を記述します。）私はその終わりのtop/leftの位置を取得しようとしています。

javascriptcssrotationcss-transforms
24
sasklacz

あなたの現在の質問とあなたの要求された確認に従って：

_var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;
_

解決策は、この他の SO Answer別の質問にあります。 ）、ここで拡張：

_// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
    return $.extend({
        width: el.outerWidth(false),
        height: el.outerHeight(false)
    }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle) {
    var dimensions = getPositionData(el);
    return {
        width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
        height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
    };
};
_


これがインタラクティブjsFiddleで、リアルタイム更新を提供します。 ）getPositionData();関数の場合。
CSS3ローテーションの最後にtopとleftの値が表示されます。 -）あなたがコントロールするプロセス。

参照：jsFiddle

ステータスアップデート：上記のjsFiddleは0-90degに最適で、 rad、grad、turn など、すべての角度とさまざまな単位で承認されます。

16
arttronics

element.getBoundingClientRect()を使用してみてください

[〜＃〜] mdn [〜＃〜] によると：

Gecko 12.0（Firefox 12.0/Thunderbird 12.0）以降、要素の外接する四角形を計算するときに、CSS変換の効果が考慮されます。

5
pozs