0

ユーザーが必要に応じて画像を4段階で回転できるようにしたいのですが、使用する回転が画像を中央に配置し、画像を左に揃えたいときに画像の半分を非表示にするため、問題が発生しています回転しても上に。私はこのスクリプトjqueryRotateを使用し、ここでフィドルを作成したことを確認します: http://jsfiddle.net/sqnsA/

ご覧のとおり、画像を垂直に回転させると画像が中央に配置されますが、cssまたはjavascriptを使用して上と左に配置する方法はありますか。これは私のJavaScriptです：

var angle = 0;
$('#rotate').click(function(e) {
    e.preventDefault();

    if (angle === 0) {
        $("#rotation").rotate(90);
    }
    if (angle === 1) {
        $("#rotation").rotate(180);
    }
    if (angle === 2) {
        $("#rotation").rotate(270);
    }
    if (angle === 3) {
        $("#rotation").rotate(360);
        angle = -1;
    }

    angle++;

});

そして、これは私のHTMLです

<div style="position: relative;top: 0px;left: 0px;" id="rotation">
<img src="myimage.jpg" style="position: relative;max-height: 275px;max-width: 356px;" id="rotan"/>
</div>

<a href="" id="rotate">Rotate</a>
4

2 に答える 2

2

4つの解決策があります。

しかし、最初に、あなたの問題を説明させてください。css 変換を使用する場合。と呼ばれるプロパティがtransform-originあり、変換が発生するポイントです。フィガーをシートの上に置いて回転させると、フィガーが回転の中心になるようなものです。

今、あなたは を回転させていdivますdisplay:block。つまり、幅は 100% で、高さはコンテンツと同じです。デフォルト値が 50% であることを知っているのでtransform-origin、そのように回転します。

さて、4つの解決策：

  1. divdisplayを に設定しinline-blockます。これにより、幅がコンテンツに合わせて調整されます。

  2. 原点が画像の中心になるように計算します。

  3. 画像を回転する

  4. divをフロートにする

ここにtransform-originに関するいくつかの情報があります。

于 2013-05-15T13:22:37.950 に答える
0

このようなことですか？

http://jsfiddle.net/bikiew/sqnsA/1/

<div style="position: relative;top: 0px;left: 0px; width:365px;" id="rotation">

divの「回転」の幅を画像と同じになるように修正しました。

于 2013-05-15T13:20:34.293 に答える