Transformación CSS3 no funciona

Estoy tratando de transformar mis elementos de menú girándolos 10 grados. Mi CSS funciona en Firefox pero no he podido replicar el efecto en Chrome y Safari. Sé que IE no es compatible con esta propiedad de CSS3, así que no hay problema.Transformación CSS3 no funciona

Solía siguiente CSS:

li a { 
    -webkit-transform:rotate(10deg); 
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg); 
}

Podría alguien por favor sugerir dónde voy mal?

Gracias.

Fuente

2011-02-07 shruti

¿Puedes publicar también en HTML? – Kyle

FYI, IE admite esta propiedad CSS3, solo necesita un prefijo: '-ms-transform: rotate (10deg);' –

Posible duplicado de [CSS transform no funciona en elementos en línea] (http: // stackoverflow. com/questions/14883250/css-transform-doesnt-work-on-inline-elements) – mems

160

Esto es simplemente una conjetura sin ver el resto de su HTML/CSS:

¿Ha solicitado display: block o display: inline-block-li a? Si no, pruébalo.

De lo contrario, intente aplicar las reglas de transformación CSS3 a li en su lugar.

Fuente

2011-02-07 10:15:43 thirtydot

¡Te amo! El 'display: inline-block' ayudó. –

¿Está tratando específicamente de rotar los enlaces solamente? Porque hacerlo on the LI tags parece funcionar bien.

According to Snook Las transformaciones requieren que los elementos afectados sean bloqueados. También tiene algún código allí para hacer que esto funcione para IE utilizando filtros, si le gusta agregarlo (aunque parece que hay alguna limitación en los valores).

Fuente

2011-02-07 10:17:42

En navegadores basados en webkit (Safari y Chrome), -webkit-transformis ignored on inline elements.. Establezca display: inline-block; en make it work. Para fines de demostración/prueba, es posible que también desee utilizar un ángulo negativo o transformation-origin para evitar que el texto gire fuera del área visible.

Fuente

2011-02-07 10:25:19 phihag

¡Funcionó perfectamente para mí, gracias! Lo utilicé en y copié para hacer un símbolo de copyleft. – Elisabeth

@Elisabeth Esa es una excelente aplicación. Tenga en cuenta que las referencias a las entidades deben terminarse en un punto y coma (como en ' © '), aunque la mayoría de los navegadores rinden en ambos sentidos. – phihag

Otra nota: si está aplicando la transformación para un estado de interacción (por ejemplo, ': hover' o': active') necesitará aplicar el 'inline-block' al elemento en su estado predeterminado, por ejemplo, 'a {display: inline-block; } a: active {transform: translateY (0.125em); } ' Aplicar 'inline-block' al estado de interacción por sí solo no parece funcionar. En Chrome al menos, funciona bien en Firefox. –

-3

-webkit-transform hay más necesaria

ms ya soportan la rotación (-ms-transform: rotate(-10deg);)

intente esto:

li a { 
    ... 

    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
    -sand-transform: rotate(10deg); 
    display: block; 
    position: fixed; 
    }

Fuente

2014-05-05 16:45:38 pdj

Durante mis pruebas de hoy, noté que '-webkit-transform' ya no se necesitaba en Chrome. Sin embargo, todavía era necesario en Safari 8. –

¿Para qué es -sand-transform? Una breve búsqueda en Google no arrojó nada. – Pete

google 'CSS Sandpaper' que es relevante para la pregunta y puede facilitar las cosas. es un truco que implementa soporte para la transformación CSS estándar para versiones anteriores de IE –

_{Como nadie hace referencia a la documentación pertinente:}

CSS Transforms Module Level 1 - Terminology - Transformable Element

Un elemento transformable es un elemento en una de estas categorías:

un elemento cuya disposición se rige por el modelo de caja CSS que es bien un block-level o atomic inline-level element, o cuya display property calcula a table-row , table-row-group, table-header-group, table-footer-group, table-cell o table-caption

un elemento en el espacio de nombres SVG y no se rige por el modelo de caja CSS que tiene la transformación de atributos, 'patternTransform' o gradientTransform.

En su caso, los elementos son <a>inline por defecto.

Cambiar el valor de la propiedad display-inline-block representa los elementos como atomic inline-level elements, y por lo tanto se convierten en los elementos "transformable" por definición.

li a { 
    display: inline-block; 
    -webkit-transform: rotate(10deg); 
    -moz-transform: rotate(10deg); 
    -o-transform: rotate(10deg); 
    transform: rotate(10deg); 
}

Como se mencionó anteriormente, esto sólo parece aplicable en -webkit navegadores basados ya que parece funcionar en IE/FF independientemente.

Fuente

2015-02-22 23:31:12

Transformación CSS3 no funciona

Respuesta

Cuestiones relacionadas