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

Estoy agregando esta respuesta no porque es 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

Tomé la siguiente imagen de algún sitio aleatorio que encontré mientras googleaba que muestra matrices rotacionales:

Rotación alrededor del eje x:
Rotación alrededor del eje y:
Giro 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]

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

La multiplicación de matrices funciona entre estas matrices 4x4, por supuesto, para realice una rotación seguida de una traducción, haga la matriz de rotación apropiada y multiplíquela por la matriz de traducción.

Esto le puede dar un poco más de libertad para hacerlo bien, y también hará que sea casi completamente imposible para cualquiera entender lo que está haciendo, incluido usted en cinco minutos.

Pero, ya sabes, funciona.

Editar: Me acabo de dar cuenta de que echaba de menos mencionar probablemente el uso más importante y práctico de esto, que es cree gradualmente transformaciones 3D complejas a través de JavaScript, donde las cosas tendrán un poco más de sentido.

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

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

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

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

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

Una forma sencilla de aplicar la transformación múltiple es esta

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

Pero también no olvides que necesitas agregar prefijo para que funcione en todos los navegadores ya que algunos navegadores como safari, es decir, no admiten la propiedad tranform sin 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 aplica el último, a menos que use la etiqueta !important, pero al mismo tiempo evite usar !important tanto como pueda, por lo que en su caso ese es el problema, por lo que la segunda transformación reemplaza la primera en este caso...

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

No te preocupes, transform acepta múltiples valores al mismo tiempo... Así que este código a continuación trabajo:

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

Si te gusta jugar con transform 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:

>

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 transform usando GUI para generar el código transfrom;)