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



Answers

Estoy agregando esta respuesta no porque sea probable que sea útil, sino solo 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

Agarré la siguiente imagen de un sitio aleatorio que encontré mientras buscaba en Google, que muestra matrices rotacionales:

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 suponiendo que lo recuerdo bien, traducción:

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

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

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

Esto puede darle un poco más de libertad para hacerlo bien, y también hará que sea completamente imposible que alguien entienda lo que está haciendo, incluyéndolo en cinco minutos.

Pero, ya sabes, funciona.

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

Question

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

Ejemplo: a continuación, solo se aplica la traducción, no la rotación.

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



Simplemente comience desde allí que en CSS , si repite 2 valores o más, siempre se aplicará el último, a menos que se use !important Tag !important , pero al mismo tiempo evite usar !important tanto como pueda, 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 , transform acepta valores múltiples al mismo tiempo ... Por lo tanto, 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 desde 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 siguiente enlace para más información:

<< Transformación CSS >>




Puede aplicar más de una transformación como esta:

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





Links