La transformación CSS3 no funciona

122

Estoy tratando de transformar los elementos de mi menú girándolos 10 grados. Mi CSS funciona en Firefox pero no pude replicar el efecto en Chrome y Safari. Sé que IE no admite esta propiedad CSS3, por lo que no es un problema.

Usé el siguiente CSS:

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

¿Alguien podría sugerir dónde me estoy equivocando?

Gracias.

html css

— Shruti
fuente

2

Para su información, IE admite esta propiedad CSS3, solo necesita un prefijo:-ms-transform:rotate(10deg);

— Joshua Pinter

El posible duplicado de la transformación CSS no funciona en elementos en línea

— mems

2

Como nadie ha mencionado esto todavía, ya que estamos en 2016, asegúrese de colocar la versión sin prefijo de la regla CSS (por ejemplo transform: rotate(10deg);) debajo de las versiones prefijadas que elija admitir.

— Maximillian Laumeister

301

Esta es simplemente una suposición informada sin ver el resto de su HTML / CSS:

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

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

— treinta y dos
fuente

22

¡Te quiero! El display: inline-blockayudado.

— Bugs Bunny

2

Una explicación sería útil :)

— scitronboy

56

En los navegadores basados en webkit (Safari y Chrome), -webkit-transform se ignora en los elementos en línea. . Preparado display: inline-block;para que funcione . Para fines de demostración / prueba, es posible que también desee utilizar un ángulo negativo o transformation-originpara que el texto no se gire fuera del área visible.

— Phihag
fuente

Funcionó perfectamente para mí, ¡gracias! Lo usé en <span> & copy </span> para hacer un símbolo de copyleft.

— Elisabeth

@Elisabeth Esa es una excelente aplicación. Sin embargo, tenga en cuenta que las referencias a entidades deben terminar con un punto y coma (como en <span>©</span>), aunque la mayoría de los navegadores se procesan en ambos sentidos.

— phihag

Otra nota: si va a aplicar la transformación de un estado de interacción (por ejemplo, :hovero :active) que necesita para aplicar el inline-blockque el elemento en su estado predeterminado, por ejemplo, a { display: inline-block; } a:active { transform: translateY(0.125em); }. Aplicar inline-blocksolo al estado de interacción no parece funcionar. En Chrome al menos, funciona bien en Firefox.

— Paul d'Aoust

1

gracias por señalar el hecho de que -webkit-transformno funciona con elementos en línea. Había estado atascado en esto anteriormente.

— pbojinov

@phihag Excelente punto, ¡me ahorraste algunos tirones de pelo! Vale la pena señalar que esto puede hacer que sus elementos desaparezcan después de que se haya ejecutado la animación.

— texelate

21

_{Dado que nadie hizo referencia a la documentación relevante:}

Módulo de Transformaciones CSS Nivel 1 - Terminología - Elemento transformable

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

un elemento cuyo diseño se rige por el modelo de caja CSS que es un elemento a nivel de bloque o atómico en línea , o cuya propiedad de visualización se calcula en fila de tabla, grupo de fila de tabla, grupo de encabezado de tabla, pie de tabla -grupo, celda de tabla o título de tabla

un elemento en el espacio de nombres SVG y no gobernado por el modelo de caja CSS que tiene los atributos transform, 'patternTransform' o gradientTransform.

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

Cambiar el displayvalor de la propiedad a inline-blockrenderiza los elementos como elementos atómicos de nivel en línea y , por lo tanto, los elementos se vuelven "transformables" 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 solo parece ser aplicable en -webkitnavegadores basados, ya que parece funcionar en IE / FF independientemente.

— Josh Crozier
fuente

0

¿Está tratando específicamente de rotar solo los enlaces? Porque hacerlo en las etiquetas LI parece funcionar bien.

Según Snook, las transformaciones requieren que los elementos afectados se bloqueen. También tiene un código para que esto funcione para IE usando filtros, si desea agregarlo (aunque parece haber alguna limitación en los valores).

— Su '
fuente

-4

-webkit-transform ya no es necesario

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

prueba 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;
    }

— pdj
fuente

1

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

— John Slegers

¿Para qué sirve -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 antiguas de IE

— Pedro Justo