web-dev-qa-db-fra.com

Rotation d'un élément div dans jQuery

Essayer de faire pivoter un élément div ... Cela pourrait être un blasphème du DOM, pourrait-il fonctionner avec un élément canvas? Je ne suis pas sûr - si quelqu'un a une idée de la façon dont cela pourrait fonctionner ou non, j'aimerais bien le savoir. Merci.

jqueryajaxdomcanvasjquery-animate
59
user43889

Pour faire pivoter une DIV Utilisez WebkitTransform / -moz-transform: rotate(Xdeg).

Cela ne fonctionnera pas dans IE. La bibliothèque Raphael fonctionne avec IE et elle effectue une rotation. Je crois qu'il utilise canvases

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

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

Assurez-vous que vous considérez la largeur de votre élément. Si vous faites pivoter un objet dont la largeur est supérieure à son contenu visible, vous obtenez résultats amusants. Cependant, vous pouvez réduire la largeur des éléments et puis les faire pivoter.

Voici un extrait de code jQuery qui fait pivoter les éléments d’un objet jQuery. La rotation peut être démarré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

Remarque:
En augmentant le degré, vous faites pivoter l'image dans le sens des aiguilles d'une montre. Diminuer le degré de rotation fera pivoter l'image sens antihoraire .

24
Peter Ajtai

ouais tu ne vas pas avoir beaucoup de chance je pense. Les principaux navigateurs utilisent généralement les trois méthodes de dessin (Canvas, SVG, VML). La prise en charge du texte est médiocre, je crois. Si vous souhaitez faire pivoter une image, c'est très bien, mais si vous avez du contenu mixte avec mise en forme et styles, ce n'est probablement pas le cas.

Consultez RaphaelJS pour une API de dessin inter-navigateurs.

7
nickf

Rotation inter-navigateur pour tous les éléments. Fonctionne dans IE7 et IE8. Dans IE7, il semble que ne fonctionne pas dans JSFiddle, mais dans mon projet, il 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 Emballé dans un plugin jquery agréable et facile à chaîner.

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/

7
Pawel

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

1
David Herse

Je doute que vous puissiez faire pivoter un élément à l'aide de DOM/CSS. Votre meilleur choix serait de faire un rendu sur une toile et de le faire pivoter (vous ne savez pas exactement).

0
strager