Faire pivoter un élément Div en jQuery

Question

J'essaie de faire pivoter un élément div... C'est peut-être un blasphème DOM, mais cela pourrait-il fonctionner avec un élément canvas ? Je ne suis pas sûr - si quelqu'un a une idée de comment cela pourrait fonctionner ou pourquoi cela ne fonctionne pas, j'aimerais le savoir. Merci.

Answer 1

Pour faire pivoter un DIV, utilisez WebkitTransform / -moz-transform: rotate(Xdeg) .

Cela ne fonctionnera pas dans IE. La bibliothèque Raphael fonctionne avec IE et il fait la rotation . Je crois qu'il utilise canvas es

Si vous voulez animer la rotation, vous pouvez utiliser une méthode récursive. setTimeout()

Vous pourriez probablement même faire une partie d'un tour avec la fonction de jQuery .animate()

Veillez à tenir compte de la largeur de votre élément. Si vous faites pivoter un élément qui a une largeur supérieure à son contenu visible, vous obtiendrez de drôles de résultats . Cependant, vous pouvez réduire la largeur des éléments, et puis les faire pivoter .

Voici un simple snippet jQuery qui fait tourner les éléments d'un objet jQuery. La rotation peut être lancée et arrêtée :

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

Exemple de jsFiddle

Note :
En prenant le degré et en l'augmentant, on fait tourner l'image dans le sens des aiguilles d'une montre. Diminuer le degré de rotation fera pivoter l'image dans le sens contraire des aiguilles d'une montre .

Answer 2

Oui, vous n'aurez pas beaucoup de chance, je pense. En général, pour les trois méthodes de dessin utilisées par les principaux navigateurs (Canvas, SVG, VML), le support du texte est médiocre, je crois. Si vous voulez faire pivoter une image, tout va bien, mais si vous avez un contenu mixte avec du formatage et des styles, probablement pas.

Vérifiez RaphaelJS pour une API de dessin multi-navigateurs.

Answer 3

Rotation inter-navigateurs pour tout élément. Fonctionne dans IE7 et IE8. Dans IE7, il semble que cela ne fonctionne pas dans JSFiddle, mais dans mon projet, cela fonctionne également dans 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 Enveloppé dans un joli et facile, chaînable, plugin jquery.

Exemple d'utilisation

$.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/

Answer 4

Voici deux correctifs de jQuery pour vous aider (peut-être déjà inclus dans jQuery au moment où vous lisez ceci) :

• Parcheando Méthode jQuery css() pour supporter 'transform'.
• Patch jQuery : Animer les rotations et les échelles CSS

Answer 5

Je doute que vous puissiez faire pivoter un élément en utilisant DOM/CSS. Votre meilleure chance serait d'effectuer un rendu sur un canevas et de le faire pivoter (je ne suis pas sûr des détails).