it-swarm.com.de

Ein Div-Element in jQuery drehen

Versuch, ein div-Element zu drehen ... Dies könnte DOM-Blasphemie sein. Könnte es möglicherweise mit einem Canvas-Element funktionieren? Ich bin mir nicht sicher - wenn jemand eine Idee hat, wie dies funktionieren könnte oder warum dies nicht der Fall ist, würde ich das gerne wissen. Vielen Dank.

59
user43889

So drehen Sie ein DIV Verwenden Sie WebkitTransform / -moz-transform: rotate(Xdeg)

Dies wird im IE nicht funktionieren. Die Raphael-Bibliothek arbeitet mit IE und sie dreht nicht. Ich glaube, es verwendet canvases

Wenn Sie die Rotation animieren möchten, können Sie eine rekursive setTimeout() verwenden.

Sie könnten wahrscheinlich sogar einen Teil einer Drehung mit jQuery .animate() machen.

Stellen Sie sicher, dass Sie die Breite Ihres Elements berücksichtigen. Wenn Sie drehen, der eine größere Breite hat als der sichtbare Inhalt, erhalten Sie lustige Ergebnisse. Sie können jedoch die Breite der Elemente verringern und dann drehen.

Hier ist ein einfaches jQuery-Snippet, das die Elemente in einem jQuery-Objekt dreht. Die Rotation kann gestartet und gestoppt werden:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle-Beispiel

Hinweis:
Wenn Sie den Grad erhöhen und erhöhen, wird das Bild im Uhrzeigersinn gedreht. Durch Verringern des Rotationsgrades wird das Bild entgegen dem Uhrzeigersinn gedreht.

23
Peter Ajtai

ja, du wirst nicht viel Glück haben, denke ich. Normalerweise wird bei den 3 Zeichenmethoden, die die wichtigsten Browser verwenden (Canvas, SVG, VML), die Textunterstützung meines Erachtens schlecht. Wenn Sie ein Bild drehen möchten, ist das alles gut, aber wenn Sie Inhalte mit Formatierung und Formatvorlagen gemischt haben, ist dies wahrscheinlich nicht der Fall.

Check out RaphaelJS für eine browserübergreifende Zeichnungs-API.

7
nickf

Browserübergreifend für jedes Element drehen. Funktioniert in IE7 und IE8. In IE7 sieht es so aus, als funktioniere ich nicht in JSFiddle, aber in meinem Projekt funktionierte es auch in IE7

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

Edit 13/09/13 15:00 Eingehüllt in ein nettes und einfaches, verkettbares Jquery-Plugin.

Anwendungsbeispiel

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle: http://jsfiddle.net/RgX86/175/

7
Pawel

Hier sind zwei jQuery-Patches, die helfen sollen (möglicherweise bereits in jQuery enthalten, wenn Sie dies lesen):

1
David Herse

Ich bezweifle, dass Sie ein Element mit DOM/CSS drehen können. Ihre beste Wette wäre, auf eine Leinwand zu rendern und diese zu drehen (nicht sicher bei den Besonderheiten).

0
strager

EDIT: Aktualisiert für jQuery 1.8

jQuery 1.8 fügt browserspezifische Transformationen hinzu. 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);
});

BEARBEITEN: Code hinzugefügt, um es zu einer jQuery-Funktion zu machen.

Für diejenigen von euch, die nicht weiter lesen wollen, geht es los. 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);
});

BEARBEITEN: Einer der Kommentare zu diesem Beitrag erwähnte jQuery Multirotation . Dieses Plugin für jQuery führt im Wesentlichen die oben genannte 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 schlage ich die obige Funktion vor. Es funktioniert mit IE9 +, Chrome, Firefox, Opera und vielen anderen.


Bobby ... Dies ist für die Leute, die es tatsächlich mit Javascript machen wollen. Dies kann erforderlich sein, um einen JavaScript-Rückruf zu aktivieren.

Hier ist ein jsFiddle .

Wenn Sie in benutzerdefinierten Intervallen drehen möchten, können Sie jQuery verwenden, um das CSS manuell festzulegen, anstatt eine Klasse hinzuzufügen. Wie dies ! Ich habe beide jQuery-Optionen am Ende der Antwort eingefügt.

[~ # ~] 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

Stellen Sie sicher, dass diese in $ (document) .ready eingeschlossen sind

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

Benutzerdefinierte Intervalle

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)'});
});
0
Dan Grahn