with - jquery parent




Rotieren eines Div-Elements in jQuery (5)

Versuche, ein div-Element zu drehen ... Das könnte DOM-Blasphemie sein, könnte es möglicherweise mit einem Canvas-Element funktionieren? Ich bin mir nicht sicher - wenn irgendjemand irgendwelche Vorstellungen davon hat, wie das funktionieren könnte oder warum nicht, würde ich es gerne wissen. Vielen Dank.


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 auf den Details).


Ja, du wirst nicht viel Glück haben, denke ich. In der Regel verwenden die Hauptbrowser (Canvas, SVG, VML) die drei Zeichenmethoden, die Textunterstützung ist meiner Meinung nach schlecht. Wenn Sie ein Bild drehen möchten, ist alles gut, aber wenn Sie gemischten Inhalt mit Formatierung und Stilen haben, wahrscheinlich nicht.

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



Cross-Browser drehen für jedes Element. Funktioniert in IE7 und IE8. Im IE7 sieht es so aus, als arbeite ich nicht in JSFiddle, aber in meinem Projekt habe ich auch im IE7 gearbeitet.

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 Eingerahmt in ein nettes, 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/


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);
});

EDIT: Code hinzugefügt, um eine jQuery-Funktion zu erstellen.

Für diejenigen von euch, die nicht weiter lesen wollen, geht es hier. 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 nützlich sein, 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 ... Das ist für die Leute, die es tatsächlich im Javascript machen wollen. Dies kann erforderlich sein, um bei einem JavaScript-Callback zu rotieren.

Hier ist ein jsFiddle .

Wenn Sie in benutzerdefinierten Intervallen drehen möchten, können Sie jQuery verwenden, um die CSS-Datei manuell festzulegen, anstatt eine Klasse hinzuzufügen. So! 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

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

Benutzerintervalle

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






jquery-animate