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.
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 canvas
es
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);
}
});
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 .
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.
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
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/
Voici deux correctifs jQuery à aider (peut-être déjà inclus dans jQuery au moment où vous lisez ceci):
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).