Freelance Expert Technique Magento - CSS : Rotation d’Ă©lĂ©ments sous IE

CONTACT
RSS

CSS : Rotation d’Ă©lĂ©ments sous IE

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).

CATÉGORIES :

Actualités

  1. La bordure noire autour des images apparait sur IE car les images utilisĂ©es sont des PNG 24, tout dĂ©pend du contexte mais si il n’y a pas de backgrounds de couleurs trĂšs diffĂ©rentes, un PNG8 avec un cache d’une couleur dans la tonalitĂ© du background (en admettant qu’il soit amenĂ© Ă  changer un peu) fera trĂšs bien l’affaire.

    • Garvil
    • August 11th, 2011

    Merci Nico,
    j’ai passĂ© mes images en png 8 et la bordure noire Ă  disparue.

    • olivier
    • September 21st, 2011

    Par contre sur le texte cela rajoute Ă©galement une bordure :-(

  2. Juste une prĂ©cision au cas oĂč, car moi j’avais pas compris ça comme ça, mais j’ai finalement trouvĂ©:
    M11=cos alpha ,M12=-sin alpha,M21=sin alpha,M22=cos alpha
    alpha Ă©tant le degrĂ© d’inclinaison.

  3. Classe ! Bravo pour le résultat qui marche sous IE7.

  1. No trackbacks yet.