transform css3

[ainvar57]

Hola, quiero poner un enlace en un lateral en el que el texto va en sentido vertical, lo consigo perfectamente con transform (menos en ie, pero eso lo solucioné con una imagen), pero tengo un problema, pues aunque no lo dije antes, antes del texto va una imagen, bien el problema es que si pongo:

Código:

#vertical p{
    transform:rotate(-90deg);
   -webkit-transform:rotate(90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
}

y en el html

Código:

<div id="vertical">
   <a class="toggle" href="javascript:void(0);" >
       <img src="images/diente_newsletter.png" alt="diente" width="17" height="25" />
       <p>NEWSLETTER</p>
   </a>
</div>

en FF el texto se monta sobre la imagen, entonces pongo un margin-top:60px, pero entonces en Chrome queda este margen de 60px, con lo que queda mal. Alguna solución para que se vea bien en los dos (ya se que con una imagen lo soluciono, pero me gustaría hacerlo con css).

[kseso?]

Por partes:
Su código es incompleto para poder reproducir el problema.
Faltas los estilos de #vertical.

A falta de conocer el doctype utilizado (y aun en el caso de que sea html5) tiene un elemento de bloque /p/ dentro de uno de línea /a/ al que rota 90º ¿Qué hará cada navegador en estos casos? Pues cada uno lo interpretará como "crea" más conveniente.

La propiedad transform es una de las horthand. Esto es, es la forma resumida de declarar un conjunto de propiedades afines, cada una de las cuales controla un aspecto diferente.
Entre otras, incluye t-origin.
Aparte de existir más valores que rotate(). Por ejemplo traslate().

Si desea más información para comprender algo más es esta propiedad puede consultar este artículo.
Y ya metidos en harina, las transform suelen ir de la mano de las transition.
Y la tercera pata del banco, las @keyframes, ya para otro rato.

[danihxh]

Hace poco contesté un tema parecido: http://www.forosdelweb.com/f53/rotar-texto-css-984269/

Lo que necesitas es la propiedad transform-origin y si en alguna versión de algún navegador (seguramente IE) te sigue dando problemas, deberás utilizar estilos diferentes para cada uno de ellos. Con la información del otro tema deberías tener suficiente, pero si tienes alguna duda pregunta.

Espero que te sirva (:

[ainvar57]

Muchas gracias a ambos.