Wie man ein Div mit jQuery dreht

Question

Ist es möglich, ein Div mit jQuery zu drehen? Ich kann ein Bild drehen, kann aber ein Div nicht drehen; Gibt es dafür eine Lösung?

Answer 1

EDIT: Aktualisiert für jQuery 1.8

Da jQuery 1.8 Browser spezifischen Transformationen werden automatisch hinzugefügt. jsFiddle Demo

var rotation = 0; 

jQuery.fn.rotate = function(degrees) { 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
    return $(this); 
}; 

$('.rotate').click(function() { 
    rotation += 5; 
    $(this).rotate(rotation); 
}); 

---

EDIT: Code hinzugefügt, es ist ein jQuery-Funktion zu machen.

Für diejenigen von euch, die nicht weiter lesen wollen, hier gehts. Für weitere Details und Beispiele lesen Sie weiter. jsFiddle Demo.

var rotation = 0; 

jQuery.fn.rotate = function(degrees) { 
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', 
       '-moz-transform' : 'rotate('+ degrees +'deg)', 
       '-ms-transform' : 'rotate('+ degrees +'deg)', 
       'transform' : 'rotate('+ degrees +'deg)'}); 
    return $(this); 
}; 

$('.rotate').click(function() { 
    rotation += 5; 
    $(this).rotate(rotation); 
}); 

---

EDIT: Einer der Kommentare zu diesem Beitrag erwähnt jQuery Multirotation. Dieses Plugin für jQuery führt im Wesentlichen die obige Funktion mit Unterstützung für IE8 aus. Es kann sich lohnen, wenn Sie maximale Kompatibilität oder mehr Optionen wünschen. Aber für minimalen Overhead empfehle ich die obige Funktion. Es funktioniert IE9 +, Chrome, Firefox, Opera und viele andere.

---

Bobby ... Dies ist für die Menschen, die tatsächlich in der Javascript tun wollen. Dies kann erforderlich sein, um bei einem JavaScript-Callback zu rotieren.

Hier ist ein jsFiddle.

Wenn Sie in benutzerdefinierten Intervallen rotieren möchten, können Sie jQuery verwenden, um die CSS manuell festzulegen, anstatt eine Klasse hinzuzufügen. Wie this! Ich habe beide jQuery Optionen am Ende der Antwort enthalten.

HTML

<div class="rotate"> 
    <h1>Rotatey text</h1> 
</div> 

CSS

/* Totally for style */ 
.rotate { 
    background: #F02311; 
    color: #FFF; 
    width: 200px; 
    height: 200px; 
    text-align: center; 
    font: normal 1em Arial; 
    position: relative; 
    top: 50px; 
    left: 50px; 
} 

/* The real code */ 
.rotated { 
    -webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(45deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -o-transform: rotate(45deg); /* Opera 10.50-12.00 */ 
    transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

jQuery

Achten Sie darauf, diese in $ (document) gewickelt sind .ready

$('.rotate').click(function() { 
    $(this).toggleClass('rotated'); 
}); 

Intervalle Individuelle

var rotation = 0; 
$('.rotate').click(function() { 
    rotation += 5; 
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)', 
       '-moz-transform' : 'rotate('+ rotation +'deg)', 
       '-ms-transform' : 'rotate('+ rotation +'deg)', 
       'transform' : 'rotate('+ rotation +'deg)'}); 
});