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

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

Tienes que ponerlos en una línea como esta:

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

Cuando tenga múltiples directivas de transformación, solo se aplicará la última. Es como cualquier otro atributo CSS.

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 4×4 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 x
Rotación alrededor del eje y: Rotación alrededor del eje y
Rotación alrededor del eje z: 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] [xyz 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 4×4, 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.

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

 

Hey!

Esto puede ser realmente útil al animar elementos con transformaciones usando Javascript.

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

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

Una forma simple de aplicar la transformación múltiple es esto

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

Pero tampoco olvide que debe agregar el prefijo para que funcione en todos los navegadores, ya que algunos navegadores como Safari no admiten la propiedad de transformación sin el prefijo.

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

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:

  

Por ejemplo

 -webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; 

Estoy usando la herramienta enjoycss

http://enjoycss.com/5C#transform

genera código css para los parámetros requeridos de transformación usando GUI para generar el código transfrom;

enter image description here