Rotation D'un élément Div à jQuery

pour faire tourner un DIV utilisez WebkitTransform / -moz-transform: rotate(Xdeg) .

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

si vous voulez animer la rotation, vous pouvez utiliser un 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 tourner une qui a une plus grande largeur que son contenu visible, vous obtiendrez résultats drôles . Toutefois, vous pouvez rétrécir les largeurs des éléments, et puis les tourner .

voici un extrait simple de jQuery qui fait tourner les éléments dans un objet jQuery. La rotation peut être commencé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);
    }
});

jsFiddle exemple

Note:

Prendre le degré et l'augmenter, fera tourner l'image dans le sens des aiguilles d'une montre. Diminuer le degré de rotation fera tourner l'image dans le sens contraire des aiguilles d'une montre .

Oui, je pense que tu n'auras pas beaucoup de chance. Typiquement, à travers les 3 méthodes de dessin utilisées par les principaux navigateurs (Canvas, SVG, VML), la prise en charge du texte est médiocre, je crois. Si vous voulez faire tourner une image, alors tout va bien, mais si vous avez un contenu mixte avec le formatage et les styles, probablement pas.

Check out RaphaelJS for a cross-browser drawing API.

cross-browser tourner pour tout élément. Travaille en IE7 et IE8. Dans IE7 ça ressemble pas de travail dans JSFiddle mais dans mon projet, a travaillé 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+')');

Modifier le 13/09/13 à 15:00 Enveloppé dans un plugin jQuery agréable et facile à découper.

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 /

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

• Patcher jQuery css() la Méthode à l'Appui de 'transformer'
• jQuery Patch: Animer CSS de Rotation et d'Échelle

je doute que vous puissiez faire tourner un élément en utilisant DOM/CSS. Votre meilleur pari serait de rendre à une toile et tourner que (pas sûr sur les détails).

EDIT: mise à Jour de jQuery 1.8

jQuery 1.8 va ajouter des transformations spécifiques au navigateur. jsFiddle Démo

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: ajout de code pour en faire une fonction jQuery.

pour ceux d'entre vous qui ne veulent plus lire, c'est parti. Pour plus de détails et des exemples, lisez la suite. jsFiddle Démo .

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: L'un des commentaires sur ce post mentionnait jQuery Multirotation . Ce plugin pour jQuery exécute essentiellement la fonction ci-dessus avec support pour IE8. Il peut être utile d'utiliser si vous voulez un maximum de compatibilité ou plus d'options. Mais pour des frais généraux minimes, je suggère la fonction ci-dessus. Il fonctionnera IE9+, Chrome, Firefox, Opéra, et beaucoup d'autres.

Bobby... C'est pour les gens qui veulent le faire en javascript. Cela peut être nécessaire pour effectuer une rotation sur un rappel javascript.

voici un jsFiddle .

si vous souhaitez tourner à intervalles personnalisés, vous pouvez utiliser jQuery pour régler manuellement le css au lieu d'ajouter une classe. Comme ce ! J'ai inclus les deux options de jQuery au bas de la réponse.

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

assurez-vous que ceux-ci sont emballés dans $(document).prêt

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

des intervalles Personnalisés

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

j'ai assemblé un programme animé de code de rotation.. vous pouvez obtenir votre code ici ... (si pas trop tard)

http://99mission.why3s.tw/rotatetest.html