Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Web Event Lyon #4

Plus d'une dizaine de conférences, des ateliers pratiques, barcamps et cliniques web, le 15 juin 2012.

Se
Connecter Créer
un compte

30
JUIL

jQuery Rotate - Rotation d'images compatible tous navigateurs

Publié le 30/07/10 à 10h11 par DJo

jQuery Rotate est un plugin jQuery permettant d'effectuer une rotation sur des images quelque soit le navigateur de votre visiteur.

jQuery Rotate est un plugin jQuery permettant d'effectuer une rotation sur des images quelque soit le navigateur de votre visiteur.

Grâce aux propriétés CSS3, il est possible de faire une rotation d'image très facilement, mais malheureusement, le rendu n'est pas compatible sur tous les navigateurs (IE ...).

jQuery Rotate apporte une solution plutôt efficace pour faire des rotations d'image sur tous les navigateurs web (Supportant Javascript).

Le script va utiliser intelligemment le HTML5 Canvas ou le VML dans le cas d'IE pour effectuer cette rotation.

Son utilisation est très simple:

  $(document).ready(function(){
    $('#monImg').rotateAnimation(-10);
  });

Spécifiez simplement l'angle et le tour est joué !

Vous pouvez aussi le faire dynamiquement en cliquant sur un lien ou au survol de l'image par exemple.

Démo

Site Officiel

A voir aussi sur le même sujet:

5 Commentaires

jquery

internet explorer

rotation

Baraguiné par calvein le 30/07/10 à 10h26

Sinon en CSS3 :

La transition:

.box_transition {
-moz-transition: all 0.3s ease-out; /* FF3.7 */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2 , Chrome */
}

L'angle:

.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5 */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1 , Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */
zoom: 1;

C'est la transition qui pose problème, pas la rotation :)

Baraguiné par DJo le 30/07/10 à 10h37

Compatible IE6 ? :D

Baraguiné par MaMouT le 30/07/10 à 15h15

C'est déjà compatible IE après le 6...
Plus ça vient et plus j'adore jquery !

Baraguiné par dutom007 le 02/08/10 à 15h18

jQuery est une perle !

Baraguiné par olymp1teractive le 05/03/12 à 10h22

Merci pour ce billet qui m'a été bien utile :)

Pour info, la méthode de rotation ne s'appelle plus rotateAnimation() mais rotate() tout court.

Donc il faut écrire :
$(document).ready(function(){
$('#monImg').rotate(-10);
});