Foros del Web » Creando para Internet » CSS »

transform css3

Estas en el tema de transform css3 en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 09/04/2012, 12:28
 
Fecha de Ingreso: mayo-2010
Mensajes: 103
Antigüedad: 13 años, 10 meses
Puntos: 4
transform css3

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).
__________________
salud
ainvar de los carnutos
  #2 (permalink)  
Antiguo 09/04/2012, 16:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: transform css3

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/04/2012, 16:14
danihxh
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: transform css3

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 (:
  #4 (permalink)  
Antiguo 10/04/2012, 03:35
 
Fecha de Ingreso: mayo-2010
Mensajes: 103
Antigüedad: 13 años, 10 meses
Puntos: 4
Respuesta: transform css3

Muchas gracias a ambos.
__________________
salud
ainvar de los carnutos

Etiquetas: css3, transformar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:20.