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

Usando CSS, ¿cómo puedo aplicar más de uno 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 tiene varias directivas de transformación, solo se aplicará la última. Es como cualquier otra regla CSS.

Tenga en cuenta que las directivas de transformación múltiple de una línea se aplican de derecha a izquierda .

Esto: transform: scale(1,1.5) rotate(90deg);
y:transform: rotate(90deg) scale(1,1.5);

será no producir el mismo resultado:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

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

Además de usar las respuestas existentes que explican cómo hacer más de una traducción al encadenarlas, 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 rotativas:

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 recuerde / 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 transformación , así como en el tutorial 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

La multiplicación de matrices funciona entre estas matrices de 4x4, por supuesto, por lo que para realizar una rotación seguida de una traducción, debe hacer la matriz de rotación adecuada y multiplicarla 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, incluido usted en cinco minutos.

Pero, ya sabes, funciona.

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

También puede aplicar múltiples 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 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);
}

En algún momento en el futuro, podemos escribirlo así:

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

Esto será especialmente útil cuando se aplican clases individuales en un elemento:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Esta sintaxis se define en la especificación de CSS Transforms Level 2 en curso , pero no puede encontrar nada sobre el soporte actual del navegador que no sea Chrome Chrome. Espero que algún día vuelva y actualice el soporte del navegador aquí;)

Encontró la información en este artículo que quizás desee consultar sobre soluciones alternativas para los navegadores actuales.

Simplemente comience desde allí que en CSS , si repite 2 valores o más, siempre se aplica el último, a menos que use la !importantetiqueta, pero al mismo tiempo evite usar !importanttanto como pueda, por lo que en su caso ese es el problema, entonces el segundo transformar anular el primero en este caso ...

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

No se preocupe , transform acepta múltiples 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 transform, 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 siguiente enlace para más información:

<< Transformación CSS >>

Transformar rotar y traducir en una sola línea css: -¿Cómo?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>