2

おそらく簡単な質問ですが…わかりません。

<a href="#" id="line">|</a>​

90°active回転するリンクをクリックすると、クラスを切り替えます。#lineクラスが再び削除されると、#line回転は0°に戻ります。

どうすれば完全な円の中で回転させることができるのだろうか？

ですから、初めて右に90°回転したときにクリックします。もう一度クリックすると、0°に戻ります（左に回転します）。ただし、180°に達するまで再び右に回転させたいです。などなど。したがって、完全な円内で回転する必要があります。

http://jsfiddle.net/5mCTd/2/

4

3 に答える 3

5

シンプルです。こちらをご覧ください。

var angle = 90;    

$('#line').click(function() {
    $(this).css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=90;
});​

不要なCSSとJSをコメントアウトしました。それがあなたが探している効果ではないかどうか私に知らせてください。それが役に立てば幸い。:)

于 2012-07-10T20:57:50.173 に答える
0

最も簡単な方法：JavaScriptでそれを行います。毎回回転量を90ずつ増やし、要素のインラインスタイルを新しい回転量に設定します。

最大の問題は、理論的には0ではなく270から360に変更することです。したがって、4つのクラス（0、90、180、270、... uh ... 0）を設定するだけでは効果がありません。

于 2012-07-10T20:01:45.953 に答える
0

ここで注意が必要なのは（指摘してくれたAnthony Millsのおかげで）270から360への移行です。単純に0に戻すことはできず、360、450などに移動する必要があります。したがって、現在の角度をとる必要があります。常に90を追加します。

プロパティから現在の角度を取得しtransformてそれに90を追加しようとしても、変換はブラウザによってマトリックスとして保存され、マトリックスから角度をリバースエンジニアリングする必要があるため、これには価値がありません（それほど難しくありません）。それを行うためのスクリプトがありますが、なぜわざわざするのですか？）

代わりに、N、E、W、S（北、東、西、南）を使用して状態を示します。これにより、文字がどこから来ているかがわかります。デフォルトはNになるので、...

<a href="#" id="line" class="N" data-turns="0">|</a>

そして、jQueryを少し。クラスを使用して現在の角度を計算するので、から行列を逆にする必要はありませんtransform。

$('#line').click(function() {
    var rot = 360 * $(this).attr('data-turns');
    switch ($(this).attr('class'))
    {
        case 'N':
            rot += 0;
            $(this).removeClass('N').addClass('E');
            break;
        case 'E':
            rot += 90;
            $(this).removeClass('E').addClass('S');
            break;
        case 'S':
            rot += 180;
            $(this).removeClass('S').addClass('W');
            break;
        case 'W':
            rot += 360;
            $(this).attr('data-turns', $(this).attr('data-turns') + 1);
            $(this).removeClass('W').addClass('N');
            break;
        default:
            $(this).attr('class', 'N');
    }
    $(this).css('transform', 'rotate('+rot+'deg)');
});

これは、でクラスを使用していない場合にのみ機能することに注意してください#line。使用している場合は、withの代わりに//withを使用する必要がifあります。実際、この情報を格納するためにクラスよりも使用する方がおそらく優れたフィールドがあります（たとえば、HTML5フィールド）。CSSとjQueryを作成する方が速くて簡単だったので、クラスを使用しました。else ifelsehasClass()switchattr('class')data-

編集：回転が完了するようN2にオプションに追加されました。toトランジションが希望どおりに回転する360degかどうかは100％わかりません。これについて言及してくれたAnthonyMillsに感謝します。N2E

data-EDIT2：CSSスタイルを完全に削除し、クラスと特定のフィールド、つまり。に基づいて正しい回転を計算するように切り替えましたdata-turns。

于 2012-07-10T20:06:49.427 に答える