javascript - JavaScriptで画像を回転しているときの奇妙な配置の問題

javascript rotation

JavaScriptでdivにラップされた画像を回転しているときに、奇妙な配置の問題が発生しています。画像を90度または270度回転すると、画像は突然、親divの上50pxと右50pxになります。 0度または180度の場合は問題ありません。

これは私がやっていることです:

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
</head>
<body>
    <div id="crop_container" style="width:400px; height:400px; border:solid 1px;">
        <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc6/249740_10150195623627623_506197622_7383520_7286937_n.jpg" style="display:block; position:relative; width:400px; height:400px;" />
    </div>
    <script language="JavaScript">
    var $cropContainer =  $("#crop_container");
    var $cropImage =  $("#crop_container img");
    var degrees = 90;

    $cropImage.css({"width":400, "height":300});
    $cropContainer.css({"width":300, "height":400});
    $cropImage.css({"-webkit-transform":"rotate("+degrees+"deg)","-moz-transform":"rotate("+degrees+"deg)"});
    //$cropImage.css({"top":50, "right":50});
    </script>
</body>
</html>


今、あなたが上から右に50pxの修正を加えた最後のcss調整線をuncommectすると、それはうまく機能しますが、なぜこれが起こっているのかについての手がかりはありませんか?

どんなアドバイスでも大歓迎です!

ありがとう!
ジョニ
答え
それはあなたがそれが何を期待するかに依存します。長方形ではなく、画像の中点を中心に回転しています。


中点プレースホルダー:(150, 200)
中点画像:(200, 150)


実際、50pxには違いがあります。次のように平行移動することで、回転する前に回転の中点を変更できます。

translate(-50px, 50px) rotate("+degrees+"deg)


画像の中点が(200 - 50, 150 + 50)((150, 200))になるようにします。

http://jsfiddle.net/4UUJN/2/
関連記事

javascript - ブラウザのブレットグラフ-d3.jsの代替? (ブラウザのサポートが良好)[終了]

javascript - jsを使用してテキストボックスのサイズを動的に設定する

javascript - JavaScriptの正規表現でキャプチャグループのインデックスを取得するにはどうすればよいですか?

javascript - IDでGoogleマップ(V3 JS API)マーカーを選択して操作する方法は?

php - JavaScriptとPHP:コード開発の長所と短所

javascript - JavaScript / JQueryを使用して外部XMLファイルから構築された配列にアクセスする

php - javascriptキャプチャしてphp変数を表示

javascript - JavaScriptのキャッシュと保護?

java - JavaScriptのような構文を自分のJavaメソッドに解析する

javascript - jQueryを使用してすべてのblockquote要素にdivラベルを追加する