[Webdesign] Rotation d’éléments avec CSS3 (IE, FF, Opera, Chrome, Safari)


Alors que je divaguais sur le web, lisant des articles de webdesign sur CSS3 (tout en me disant que cela ne me servirait pas de sitôt), je suis tombé sur un article intéressant traitant de rotation d’élément.

Jusqu’ici, faire des rotations avec CSS3 était impossible avec IE (étonnant !) et Opera. Or la sortie de la version 10.5 (alpha) de ce dernier pourrait changer la donne.

En effet de nouvelles transitions ont été implémentées dans cette version et notamment rotate.

Le résultat

Pas besoin de grands discours. Le résultat souhaité est un élément ayant pivoté d’un certain angle. c’est classe et ca fait des webdesign avec moins d’images donc plus rapide à charger.
Mieux, la possibilité de faire pivoter une élément lorsque celui-ci est survolé (hover).

En live si vous le souhaitez ici.

La technique

Le code source :

<a href="#" id="one" class="rotate">This is 45deg -rotated element.</a>
<a href="#" id="two" class="rotate">This is 10deg -rotated element, which rotates to 45deg when hovered.</a>

Nous avons là un élément que l’on fait tourner de manière statique et un second qui non seulement possède un angle au départ mais tourne encore lors de son survol.

Pour y arriver, le code CSS3 est le suivant :

#one {
-moz-transform:rotate(45deg); //firefox
-webkit-transform:rotate(45deg); //Chrome, Safari
-o-transform:rotate(45deg); //Opera
}

#two {
-moz-transform:rotate(10deg); //firefox
-webkit-transform:rotate(10deg); //Chrome, Safari
-o-transform:rotate(10deg); //Opera
}

#two:hover {
-moz-transform:rotate(45deg); //firefox
-webkit-transform:rotate(45deg); //Chrome, Safari
-o-transform:rotate(45deg); //Opera
}

Jusqu’ici tout va bien. Mais je vous entend déjà hurler au mensonge : où est la solution pour IE ?

La solution repose sur Matrix et la librairie JS externe HTC, bien connue des bidouilleurs. Pour en savoir plus sur celle-ci, je vous recommande l’article de Babylon-Design

Il faut lier le fichier CSS et les bons sélecteurs créés précédemment avec un fichier HTC (-ms-transform.htc).

#one {
behavior:url(-ms-transform.htc);
-ms-transform:rotate(45deg);
}
#two {
behavior:url(-ms-transform.htc);
-ms-transform:rotate(10deg);
}
#two:hover {
-ms-transform:rotate(45deg);
}

HTC sert ici uniquement à simplifier l’utilisation de Matrix, qui est très complexe à mon avis.

En gros une fonction de rotation avec Matrix peut-être (trouvée sur MSDN) :

    
//oObj input requires that a matrix filter be applied. 
//deg input defines the requested angle of rotation.
var deg2radians = Math.PI * 2 / 360;
function fnSetRotation(oObj, deg)
{    rad = deg * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    oObj.filters.item(0).M11 = costheta;
    oObj.filters.item(0).M12 = -sintheta;
    oObj.filters.item(0).M21 = sintheta;
    oObj.filters.item(0).M22 = costheta;

}

Le fichier HTC va en gros contenir des directives pour que le filtre DXImageTransform (object.style.filter =
"progid:DXImageTransform.Microsoft.Matrix(sProperties)"
) soit appelé lors du survol par la souris (donc sur l’évènement onmousseover) ou au chargement (cas 1). Bref je simplifie par ce que c’est assez complexe.

La conclusion

Bon vous l’aurez compris, la simplicité n’est pas pour demain. En tout cas j’ai trouvé cette technique intéressante. A creuser donc.

D’autres techniques à partager ?