28172 sujets

CSS et mise en forme, CSS3

Transform:scale ; fonctionne sous IE10 mais pas Chrome & FF

Bonjour,

je souhaite ajouter un effet d'étirement sur du texte sur mon site. j'utilise pour cela la propriété CSS "transform:scale"
Cela fonctionne sous IE10, mais pas sous Chrome (27) ni Firefox (22). Et je n'arrive pas à voir pourquoi ça ne marche pas.

Voila le bout de code que j'utilise pour tester la fonction. C'est un peu bordélique je vous l'accorde Smiley lol 
<html>
<style type="text/css">
html {font-size:62.5%}
#menu {height:43px; padding-top: 13px; text-align:center;}
#menu a {margin:0px 10px; padding:10px 10px; color:#B02802; font-size:15px; font-weight:bold; text-decoration:none;}
#menu a:hover {color:#000000;}
#menu {width:80%; background:#FFFFFF; margin: 0px auto; border-radius: 20px 20px 0px 0px;}
</style>
	<div id="menu" style="height:35px;border-bottom:2px solid #F74602">
		<a href="/"	style="background:url('http://www.djmoltes.net/img/menu_home.png') no-repeat;margin:0% 1%;padding:0.4% 1% 0.4% 4%;">
		<span style="font-size:1.5rem;transform:scale(2,2);-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);">Accueil
		</span>
		</a>
		<span style="font-size:1.5rem;transform:scale(4);-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);">Animateur
		</span>
		<a href="materiel.html" style="background:url('http://www.djmoltes.net/img/menu_equipment.png') no-repeat;margin:0% 1%;padding:0.4% 1% 0.4% 4.2%;">
		<span style="font-size:1.5rem;transform:scale(2,2);-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);">Matériel
		</span>
		</a>
	</div>
</html>


Les textes "Accueil" et "Matériel" ne semblent pas plus gros que sans la transformation; et "Animateur" qui devrait être encore plus étiré ne l'est pas.

Merci d'avance Smiley smile
Matthieu
salut,
tu dois ajouter un "display:inline-block" à tes <span>. Par contre pourquoi passer par scale quant font-size existe ?
Et pour le côté bordélique... Je dirais que oui, c'est bordélique Smiley lol
Merci Zelalsan, c'était bien ça Smiley smile

En fait l'effet produit n'est pas celui auquel je pensais, et effectivement ça à l'air de faire la même chose que font-size en plus contraignant (pour ce cas là) Smiley lol

Merci de ton aide, je vais réfléchir à autre chose maintenant ^^

Matthieu
Sujet clos
Aller à