Lors d’un développement récent, je cherchai à effectuer une rotation sur un ensemble d’éléments. Je suis tombé en farfouillant sur les forums sur un post de Calou où il présentait une solution à un autre soucis de rotation qu’il avait lui-même trouvé ailleurs (Thx Calou, t’es un Caïd).

J’ai de ce fait exploité davantage la chose ( ce qui m’a pris pas mal de temps, car franchement c’est pas simple ) afin de trouver des correspondances pour effectuer cet effet sous Internet Explorer (bah oui, sinon ce serait trop simple).
Ci-dessous vous trouverez comme d’habitude une démonstration ainsi que les sources de l’exemple.

Donc, pour les rotations sous ie, voici le principe :

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

Pas besoin de détailler les transform des navigateurs supportant le CSS3, ils sont on ne peut plus intuitifs.

En revanche, pour IE, c’est une toute autre paire de manches ! Il s’agit en fait de faire appel aux propriétés matricielles du navigateur afin de déformer notre image (attention, ceci entraine également un déplacement de l’image et un réajustement du design global est alors nécessaire).
Malgré le temps important que j’ai passé dessus, je ne suis pas encore en complète mesure de vous expliquer l’intérêt de chaque propriété, mais ai néanmoins réussi à créer toute une série d’angles pour placer mes éléments, ainsi les sources ici proposées peuvent servir de références afin de placer vos propres éléments.

Le hic (car il y en a toujours un avec IE) réside dans l’apparition d’une bordure noire autour de votre image, rendant ainsi ce script pas vraiment exploitable pour un module que vous souhaiteriez faire facturer, vous imposant donc de créer votre images déjà inclinées..

Bon, ça fait toujours un début si certains veulent poursuivre dans cette logique afin d’obtenir un rendu “parfait” :)
Merci donc de me faire signe si vous arrivez à virer ces bordures :p (Sans javascript).