javascript - ハンドル付きのjquerydivローテーション

Question

divを回転させたいのですが、を使ってhandle ( button on its top-right corner )試しましたが、成功しませんでした。この仕事をしてくれるプラグインがあれば教えてください。ありがとう ！

Answer 1

おそらくここで解決策を見つけることができます: jQuery - CSS - ドラッグ マウス イベントによる Div の回転 これは、似たような問題です。

Answer 2

jquery である必要がない場合は、CSS3 を使用できます。

CSS3 回転で小さなサンプル スクリプトを作成しました。

<style>
.divClass:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}
.divClass {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    width: 200px;
    height: 200px;
    background-color:orange;
}

</style>

<div class="divClass">
    <button style="float: right">42</button>
</div>

それをhtmlファイルに入れて、それがあなたが望むものかどうか見ることができます。

実際、すべての主要なブラウザーでサポートされているかどうかはわかりません。Chrome でテストしたところです。

Answer 3

次/前のデモの次のボタンを使用して、jQuery サイクル プラグイン、特に中間デモ (パート 2)を見てください。

HTML

<div id="divWrapper">
    <a href="#" id="handle">Rotate</a>

    <div id="divRotate">
        <div>This is content One...</div>
        <div>This is content Two...</div>
        <div>This is content Three...</div>
        <div>This is content Four...</div>
    </div>
</div>​

JS

$('#divRotate').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#handle'
});​

デモはこちら