css -> transform:scale avec IE

21 mars 2011, 20:33

Bonsoir,
J'ai un petit problème avec une transformation d'échelle sur des images en CSS.

J'ai une liste qui forme des groupes de deux images :

Code : Tout sélectionner

ul.list_photos {
    margin:0;
    padding:0;
}

ul.list_photos li {
    list-style-type:none;
    float:left;
    padding:0;
    margin:4px;
}

Sur la première image de chaque groupe j'ai voulu appliquer un effet d'échelle au passage de la souris :
J'ai donc adapté le CSS à tous les navigateurs, avec -webkit- pour internet explorer.

Code : Tout sélectionner

.zoom a:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

Dans ma page php je fais appel à ma feuille CCS :

  <li><div style="display: inline" class="zoom">
                                <a rel="groupe" href="<?php echo $urlphoto, '/',$Fichier;?>" alt="<?php echo $fichiersansex;?>" title="<?php echo $fichiersansex;?>">
                                        <img src="<?php echo $urlphoto, '/',$Fichier;?>" width="<?php echo $l_vign;?>" height="<?php echo $h_vign;?>" />
                                </a></div>
                                <br />
<?php include("hq.php"); ?>
                        </li>

Le problème on s'en doute, c'est que l'effet d'échelle des images marche partout sauf sur IE (8 et 9). Que faire ? ^^
->hq.php contient la deuxième image et le lien de cette deuxième image.

22 mars 2011, 01:01

Salut,
pour IE9 (malheureusement cela ne fonctionnera pas sur IE8) un petit

Code : Tout sélectionner

-ms-transform: scale(1.1);

devrait faire l'affaire

http://msdn.microsoft.com/en-us/library/ff974936.aspx

22 mars 2011, 14:07

Salut, merci !
C'est ce que je craignais... Bon au moins IE9 prend en charge ce genre de manips 2D que je trouve sympa.
(ça marche merci, je pensais que c'était -webkit- pour IE et non -ms-)

css -> transform:scale avec IE

Qui est en ligne