css3 ¿Cómo aplicar múltiples transformaciones en CSS?





3 Answers

Estoy agregando esta respuesta no porque es probable que sea útil, sino simplemente porque es verdad.

Además de usar las respuestas existentes que explican cómo hacer más de una traducción encadenándolas, también puede construir la matriz 4x4 usted mismo.

Tomé la siguiente imagen de un sitio aleatorio que encontré mientras buscaba en Google que muestra matrices de rotación:

Rotación alrededor del eje x:
Rotación alrededor del eje y:
Rotación alrededor del eje z:

No pude encontrar un buen ejemplo de traducción, así que, asumiendo que lo recuerdo / entiendo bien, traducción:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Vea más en el artículo de Wikipedia sobre la transformación , así como en el tutorial Pragamatic CSS3 que lo explica bastante bien. Otra guía que encontré que explica matrices de rotación arbitrarias son las notas de Egon Rath sobre matrices.

La multiplicación de matrices funciona entre estas matrices 4x4, por supuesto, para realizar una rotación seguida de una traducción, se crea la matriz de rotación apropiada y se multiplica por la matriz de traducción.

Esto puede darte un poco más de libertad para hacerlo bien, y también hará que sea prácticamente imposible que alguien entienda lo que está haciendo, incluyéndote a ti en cinco minutos.

Pero, ya sabes, funciona.

Edición: Me acabo de dar cuenta de que me olvidé de mencionar el uso más importante y práctico de esto, que consiste en crear transformaciones 3D complejas a través de JavaScript, donde las cosas tendrán un poco más de sentido.

css css3 transform

Usando CSS, ¿cómo puedo aplicar más de una transform ?

Ejemplo: En lo siguiente, solo se aplica la traducción, no la rotación.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}



También puede aplicar múltiples transformaciones utilizando una capa adicional de marcado, por ejemplo:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

Esto puede ser realmente útil cuando se animan elementos con transformaciones usando Javascript.




Simplemente comience desde allí que en CSS , si repite 2 valores o más, siempre se aplicará el último, a menos que use !important etiqueta !important , pero al mismo tiempo evite usar la mayor !important posible, por lo que en su caso ese es el problema , entonces la segunda transformación anula la primera en este caso ...

Entonces, ¿cómo puedes hacer lo que quieres entonces? ...

No se preocupe , transformar acepta varios valores al mismo tiempo ... Entonces, este código a continuación funcionará:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

Si te gusta jugar con la transformación, ejecuta el iframe de MDN a continuación:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Mira el enlace de abajo para más información:

<< CSS transformar >>






Related