html - div - La transformación CSS3 no funciona

title html attribute

Question

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 admite esta propiedad de CSS3, así que no hay problema.

Utilicé el siguiente CSS:

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

¿Podría alguien sugerir por favor dónde estoy yendo mal?

Gracias.

Answer 1

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

Según 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).

Answer 2

En los navegadores basados ​​en webkit (Safari y Chrome), -webkit-transform se ignora en los elementos en línea. . Establecer display: inline-block; para hacer que funcione Para propósitos de demostración / prueba, también puede usar un ángulo negativo o un transformation-origin para que el texto no se salga del área visible.

Answer 3

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

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

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

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

Answer 5

_{Como 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 block-level línea atómico o de block-level o cuya propiedad de visualización se computa a la fila de tabla, grupo de fila de tabla, grupo de encabezado de tabla, pie de tabla -grupo, tabla-celda o pie de tabla
• un elemento en el espacio de nombres SVG y no se rige por el modelo de caja CSS que tiene los atributos transform, ''patternTransform'' o gradientTransform.

En su caso, los elementos <a> están en inline por defecto.

Cambiar el valor de la propiedad de display a inline-block en inline-block representa los elementos como elementos atómicos 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 aplicable en navegadores basados ​​en el sitio -webkit ya que parece funcionar independientemente en IE / FF.