4

要素を回転させると

myElem.css('-moz-transform', 'rotate(' + degree + 'deg)');
myElem.css('-webkit-transform', 'rotate(' + degree + 'deg)');
myElem.css('-o-transform', 'rotate(' + degree + 'deg)');
myElem.css('-ms-transform', 'rotate(' + degree + 'deg)');

正しい左/上の位置を取得する必要があります...

myElem.getBoundingClientRect().left

...正しい x/y 位置を提供しません。jQueryを使用したfeだけでなく...

$(myElem).position().left

...間違った値を提供します。

これが私の言いたいことを示す画像です （出典：dasprinzip.com）回転したdiv

何をすべきか？

4

1 に答える 1

0

私はあなたのために JSFiddle を書きました。うまくいけば、すべてを解決するための材料が得られるでしょう: http://jsfiddle.net/pM54e/2/ Fiddle のspanは、値が正しいかどうかをテストすることです。数式で計算された高さを与え、オレンジ色のボックスの角と一致するかどうかを確認します。

var numY = Math.abs(myElem.position().top + sign*( (myElem.outerHeight() / 2) - Math.sin(degree)));

これにより、回転した要素の左上隅の Y 位置が決まります。(myElem.outerHeight() / 2)それがあなたの要素であることを覚えておいてtransform-originください。デフォルトは要素の高さと幅の 50% です。原点を変更する場合は、数式でその値を変更する必要があります。

現在、x 位置を把握してより詳細な例を提供する時間はあまりありませんが、明日時間を見つけたら、より多くのテスト、詳細、および x 値で回答を更新します。

お役に立てれば

于 2013-11-22T00:47:24.563 に答える