jQuery div вращение с ручкой

Question

Я хочу повернуть div, но с handle (button on its top-right corner), я попытался, но я did`nt получить успех, поэтому, если есть какой-либо плагин, который выполняет эту работу для меня, то, пожалуйста, дайте мне знать? Благодаря !

Answer 1

Вы можете probabely найти решение здесь: jQuery - CSS - Rotate Div by drag mouse event Это своего рода подобной проблемы.

Answer 2

Посмотрите на jQuery Cycle Plugin в частности Intermediate Demos (Part 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' 
});​ 

DEMO HERE

Answer 3

Если вам не нужно быть 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.